ant-design/components/button/demo/loading.md

55 lines
1.1 KiB
Markdown
Raw Normal View History

2016-03-31 09:40:55 +08:00
---
order: 4
title:
zh-CN: 加载中状态
en-US: Loading
2016-03-31 09:40:55 +08:00
---
2015-06-17 21:29:58 +08:00
## zh-CN
2015-12-28 13:57:02 +08:00
添加 `loading` 属性即可让按钮处于加载状态,最后两个按钮演示点击后进入加载状态。
## en-US
Set `loading` to `Button`, and then it will become loading button.
2015-07-29 22:23:55 +08:00
````jsx
2016-04-12 12:17:03 +08:00
import { Button } from 'antd';
2015-09-27 16:30:35 +08:00
const App = React.createClass({
2015-07-29 22:23:55 +08:00
getInitialState() {
return {
2015-12-28 13:49:58 +08:00
loading: false,
iconLoading: false,
2015-07-29 22:23:55 +08:00
};
},
enterLoading() {
2015-12-28 13:49:58 +08:00
this.setState({ loading: true });
},
enterIconLoading() {
this.setState({ iconLoading: true });
2015-07-29 22:23:55 +08:00
},
render() {
return (
<div>
<Button type="primary" loading>
Loading
</Button>
<Button type="primary" size="small" loading>
Loading
</Button>
<br />
<Button type="primary" loading={this.state.loading} onClick={this.enterLoading}>
Click me!
</Button>
2016-04-12 12:17:03 +08:00
<Button type="primary" icon="poweroff" loading={this.state.iconLoading} onClick={this.enterIconLoading}>
Click me!
</Button>
</div>
);
2016-05-11 09:32:33 +08:00
},
2015-07-29 22:23:55 +08:00
});
ReactDOM.render(<App />, mountNode);
````