mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-15 09:21:22 +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
1.7 KiB
1.7 KiB
order | title | ||||
---|---|---|---|---|---|
9 |
|
zh-CN
添加 loading
属性即可让按钮处于加载状态,最后两个按钮演示点击后进入加载状态。
en-US
A loading indicator can be added to a button by setting the loading
property on the Dropdown.Button
.
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);