mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-12 23:35:38 +08:00
63 lines
1.2 KiB
Markdown
63 lines
1.2 KiB
Markdown
---
|
|
order: 3
|
|
title:
|
|
zh-CN: 包含子组件
|
|
en-US: Contains sub component
|
|
---
|
|
|
|
## zh-CN
|
|
|
|
加载占位图包含子组件。
|
|
|
|
## en-US
|
|
|
|
Skeleton contains sub component.
|
|
|
|
```jsx
|
|
import { Skeleton, Button } from 'antd';
|
|
|
|
class Demo extends React.Component {
|
|
state = {
|
|
loading: false,
|
|
};
|
|
|
|
showSkeleton = () => {
|
|
this.setState({ loading: true });
|
|
setTimeout(() => {
|
|
this.setState({ loading: false });
|
|
}, 3000);
|
|
};
|
|
|
|
render() {
|
|
return (
|
|
<div className="article">
|
|
<Skeleton loading={this.state.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={this.showSkeleton} disabled={this.state.loading}>
|
|
Show Skeleton
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
ReactDOM.render(<Demo />, mountNode);
|
|
```
|
|
|
|
<style>
|
|
.article h4 {
|
|
margin-bottom: 16px;
|
|
}
|
|
.article button {
|
|
margin-top: 16px;
|
|
}
|
|
</style>
|