mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-15 00:29:12 +08:00
32 lines
891 B
TypeScript
32 lines
891 B
TypeScript
import { Button, Skeleton, Space } from 'antd';
|
|
import React, { useState } from 'react';
|
|
|
|
const App: React.FC = () => {
|
|
const [loading, setLoading] = useState<boolean>(false);
|
|
|
|
const showSkeleton = () => {
|
|
setLoading(true);
|
|
setTimeout(() => {
|
|
setLoading(false);
|
|
}, 3000);
|
|
};
|
|
|
|
return (
|
|
<Space direction="vertical" style={{ width: '100%' }} size={16}>
|
|
<Skeleton loading={loading}>
|
|
<h4 style={{ marginBottom: 16 }}>Ant Design, a design language</h4>
|
|
<p>
|
|
We supply a series of design principles, practical patterns and high quality design
|
|
resources (Sketch and Axure), to help people create their product prototypes beautifully
|
|
and efficiently.
|
|
</p>
|
|
</Skeleton>
|
|
<Button onClick={showSkeleton} disabled={loading}>
|
|
Show Skeleton
|
|
</Button>
|
|
</Space>
|
|
);
|
|
};
|
|
|
|
export default App;
|