mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-12 15:19:58 +08:00
a67d39cd6c
* docs: Update Menu cn doc * chore: update ts def * chore: support convert * docs: more demo * docs: more demo * docs: all menu demos * docs: dropdown demo * docs: dropdown all demos * docs: update demo * test: coverage * docs: more demo * docs: layout demo * docs: all demo * chore: fix ts lint * docs: fix doc * docs: all docs
79 lines
1.7 KiB
Markdown
79 lines
1.7 KiB
Markdown
---
|
|
order: 9
|
|
title:
|
|
zh-CN: 加载中状态
|
|
en-US: Loading
|
|
---
|
|
|
|
## zh-CN
|
|
|
|
添加 `loading` 属性即可让按钮处于加载状态，最后两个按钮演示点击后进入加载状态。
|
|
|
|
## en-US
|
|
|
|
A loading indicator can be added to a button by setting the `loading` property on the `Dropdown.Button`.
|
|
|
|
```jsx
|
|
import { Menu, Dropdown, Space } from 'antd';
|
|
import { DownOutlined } from '@ant-design/icons';
|
|
|
|
const menu = (
|
|
<Menu
|
|
items={[
|
|
{
|
|
label: 'Submit and continue',
|
|
key: '1',
|
|
},
|
|
]}
|
|
/>
|
|
);
|
|
class App extends React.Component {
|
|
state = {
|
|
loadings: [],
|
|
};
|
|
|
|
enterLoading = index => {
|
|
const newLoadings = [...this.state.loadings];
|
|
newLoadings[index] = true;
|
|
this.setState({
|
|
loadings: newLoadings,
|
|
});
|
|
setTimeout(() => {
|
|
newLoadings[index] = false;
|
|
this.setState({ loadings: newLoadings });
|
|
}, 6000);
|
|
};
|
|
|
|
render() {
|
|
const { loadings } = this.state;
|
|
return (
|
|
<Space direction="vertical">
|
|
<Dropdown.Button type="primary" loading overlay={menu}>
|
|
Submit
|
|
</Dropdown.Button>
|
|
<Dropdown.Button type="primary" size="small" loading overlay={menu}>
|
|
Submit
|
|
</Dropdown.Button>
|
|
<Dropdown.Button
|
|
type="primary"
|
|
loading={loadings[0]}
|
|
overlay={menu}
|
|
onClick={() => this.enterLoading(0)}
|
|
>
|
|
Submit
|
|
</Dropdown.Button>
|
|
<Dropdown.Button
|
|
icon={<DownOutlined />}
|
|
loading={loadings[1]}
|
|
overlay={menu}
|
|
onClick={() => this.enterLoading(1)}
|
|
>
|
|
Submit
|
|
</Dropdown.Button>
|
|
</Space>
|
|
);
|
|
}
|
|
}
|
|
ReactDOM.render(<App />, mountNode);
|
|
```
|