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

51 lines
1008 B
Markdown
Raw Normal View History

2015-06-17 21:29:58 +08:00
# 加载中
2015-09-27 16:30:35 +08:00
- order: 4
2015-06-17 21:29:58 +08:00
2015-09-27 16:30:35 +08:00
添加 `loading` 属性即可让按钮处于加载状态,最后一个按钮演示点击后进入加载状态。
---
2015-07-29 22:23:55 +08:00
````jsx
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 {
loading: false
};
},
enterLoading() {
this.setState({
loading: true
});
},
render() {
return <div>
2015-10-28 15:45:31 +08:00
<Button type="primary" size="large" loading={true}>
2015-07-29 22:23:55 +08:00
加载中
2015-09-27 16:30:35 +08:00
</Button>
2015-10-28 15:45:31 +08:00
<Button type="primary" loading={true}>
2015-07-29 22:23:55 +08:00
加载中
2015-09-27 16:30:35 +08:00
</Button>
2015-10-28 15:45:31 +08:00
<Button type="primary" size="small" loading={true}>
2015-07-29 22:23:55 +08:00
加载中
2015-09-27 16:30:35 +08:00
</Button>
2015-07-29 22:23:55 +08:00
<br />
2015-09-27 16:30:35 +08:00
<Button type="primary" loading={this.state.loading} onClick={this.enterLoading}>
2015-07-29 22:23:55 +08:00
点击变加载
2015-09-27 16:30:35 +08:00
</Button>
2015-07-29 22:23:55 +08:00
</div>;
}
});
2015-10-20 16:47:55 +08:00
ReactDOM.render(<App />, document.getElementById('components-button-demo-loading'));
````
2015-07-29 22:23:55 +08:00
<style>
#components-button-demo-loading .ant-btn {
margin-right: 8px;
margin-bottom: 12px;
}
</style>