ant-design/components/skeleton/demo/children.md

59 lines
1.1 KiB
Markdown
Raw Normal View History

---
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>