ant-design/components/spin/demo/nested.md

45 lines
889 B
Markdown
Raw Normal View History

2016-03-31 09:40:55 +08:00
---
order: 3
title:
zh-CN: 卡片加载中
en-US: Embedded mode
2016-03-31 09:40:55 +08:00
---
2015-10-31 02:00:03 +08:00
## zh-CN
2015-10-31 02:00:03 +08:00
可以直接把内容内嵌到 `Spin` 中,将现有容器变为加载状态。
## en-US
Embedding content into `Spin` will alter it into loading state.
2015-10-31 02:00:03 +08:00
````jsx
2015-11-03 22:41:57 +08:00
import { Spin, Switch, Alert } from 'antd';
2015-10-31 02:00:03 +08:00
const Card = React.createClass({
getInitialState() {
2016-05-09 16:11:54 +08:00
return { loading: false };
2015-10-31 02:00:03 +08:00
},
toggle(value) {
2016-05-09 16:11:54 +08:00
this.setState({ loading: value });
2015-10-31 02:00:03 +08:00
},
render() {
const container = (
2017-01-07 22:07:09 +08:00
<Alert
message="Alert message title"
description="Further details about the context of this alert."
type="info"
/>
);
return (
<div>
2016-05-09 16:11:54 +08:00
<Spin spinning={this.state.loading}>{container}</Spin>
Loading state<Switch checked={this.state.loading} onChange={this.toggle} />
</div>
);
2016-05-11 09:32:33 +08:00
},
2015-10-31 02:00:03 +08:00
});
ReactDOM.render(<Card />, mountNode);
2015-10-31 02:00:03 +08:00
````