mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-14 16:19:15 +08:00
1.1 KiB
1.1 KiB
order | title | ||||
---|---|---|---|---|---|
3 |
|
zh-CN
加载占位图包含子组件。
en-US
Skeleton contains sub component.
import { Button, Skeleton } from 'antd';
import React, { useState } from 'react';
const App: React.FC = () => {
const [loading, setLoading] = useState(false);
const showSkeleton = () => {
setLoading(true);
setTimeout(() => {
setLoading(false);
}, 3000);
};
return (
<div className="article">
<Skeleton loading={loading}>
<div>
<h4>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>
</div>
</Skeleton>
<Button onClick={showSkeleton} disabled={loading}>
Show Skeleton
</Button>
</div>
);
};
export default App;