ant-design/components/skeleton/demo/children.tsx
afc163 ac1e1c230b
docs: fix Skeleton style and demo layout (#38625)
* docs: fix skeleton demo style

* docs: update skeleton demo
2022-11-17 18:49:41 +08:00

33 lines
838 B
TypeScript

import React, { useState } from 'react';
import { Button, Skeleton } from 'antd';
const App: React.FC = () => {
const [loading, setLoading] = useState(false);
const showSkeleton = () => {
setLoading(true);
setTimeout(() => {
setLoading(false);
}, 3000);
};
return (
<>
<Skeleton loading={loading}>
<h4 style={{ marginBottom: 16 }}>Ant Design, a design language</h4>
<p style={{ marginBottom: 16 }}>
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>
</>
);
};
export default App;