ant-design/components/skeleton/demo/children.tsx
二货爱吃白萝卜 2cdf586291
chore: fix lint ()
* chore: fix lint

* chore: fix lint

* test: fix 16

* fix: lint
2023-07-28 16:17:43 +08:00

32 lines
891 B
TypeScript

import React, { useState } from 'react';
import { Button, Skeleton, Space } from 'antd';
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;