2016-03-31 09:40:55 +08:00
|
|
|
|
---
|
|
|
|
|
order: 3
|
2016-09-20 14:51:43 +08:00
|
|
|
|
title:
|
2016-07-21 09:51:04 +08:00
|
|
|
|
zh-CN: 卡片加载中
|
|
|
|
|
en-US: Embedded mode
|
2016-03-31 09:40:55 +08:00
|
|
|
|
---
|
2015-10-31 02:00:03 +08:00
|
|
|
|
|
2016-07-21 09:51:04 +08:00
|
|
|
|
## zh-CN
|
|
|
|
|
|
2015-10-31 02:00:03 +08:00
|
|
|
|
可以直接把内容内嵌到 `Spin` 中,将现有容器变为加载状态。
|
|
|
|
|
|
2016-07-21 09:51:04 +08:00
|
|
|
|
## 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() {
|
2016-01-07 16:29:12 +08:00
|
|
|
|
const container = (
|
2017-01-07 22:07:09 +08:00
|
|
|
|
<Alert
|
|
|
|
|
message="Alert message title"
|
2016-09-18 09:24:49 +08:00
|
|
|
|
description="Further details about the context of this alert."
|
2016-06-06 13:54:10 +08:00
|
|
|
|
type="info"
|
|
|
|
|
/>
|
2016-01-07 16:29:12 +08:00
|
|
|
|
);
|
|
|
|
|
return (
|
|
|
|
|
<div>
|
2016-05-09 16:11:54 +08:00
|
|
|
|
<Spin spinning={this.state.loading}>{container}</Spin>
|
2016-09-18 09:24:49 +08:00
|
|
|
|
Loading state:<Switch checked={this.state.loading} onChange={this.toggle} />
|
2016-01-07 16:29:12 +08:00
|
|
|
|
</div>
|
|
|
|
|
);
|
2016-05-11 09:32:33 +08:00
|
|
|
|
},
|
2015-10-31 02:00:03 +08:00
|
|
|
|
});
|
|
|
|
|
|
2015-12-29 12:08:58 +08:00
|
|
|
|
ReactDOM.render(<Card />, mountNode);
|
2015-10-31 02:00:03 +08:00
|
|
|
|
````
|