2018-08-22 23:34:36 +08:00
|
|
|
---
|
2018-09-02 15:46:49 +08:00
|
|
|
order: 3
|
2018-08-22 23:34:36 +08:00
|
|
|
title:
|
|
|
|
zh-CN: 包含子组件
|
|
|
|
en-US: Contains sub component
|
|
|
|
---
|
|
|
|
|
|
|
|
## zh-CN
|
|
|
|
|
|
|
|
加载占位图包含子组件。
|
|
|
|
|
|
|
|
## en-US
|
|
|
|
|
|
|
|
Skeleton contains sub component.
|
|
|
|
|
2019-05-07 14:57:32 +08:00
|
|
|
```jsx
|
2018-08-22 23:34:36 +08:00
|
|
|
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>
|
2019-05-07 14:57:32 +08:00
|
|
|
<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>
|
2018-08-22 23:34:36 +08:00
|
|
|
</div>
|
|
|
|
</Skeleton>
|
|
|
|
<Button onClick={this.showSkeleton} disabled={this.state.loading}>
|
|
|
|
Show Skeleton
|
|
|
|
</Button>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-04-03 23:27:45 +08:00
|
|
|
export default () => <Demo />;
|
2019-05-07 14:57:32 +08:00
|
|
|
```
|
2018-08-22 23:34:36 +08:00
|
|
|
|
|
|
|
<style>
|
|
|
|
.article h4 {
|
|
|
|
margin-bottom: 16px;
|
|
|
|
}
|
|
|
|
.article button {
|
|
|
|
margin-top: 16px;
|
|
|
|
}
|
|
|
|
</style>
|