mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 03:59:01 +08:00
Dropdown中增加菜单隐藏方式示例和文档
This commit is contained in:
parent
1021d62ef6
commit
8287bac62e
46
components/dropdown/demo/overlay-visible.md
Normal file
46
components/dropdown/demo/overlay-visible.md
Normal file
@ -0,0 +1,46 @@
|
||||
---
|
||||
order: 6
|
||||
title: 菜单隐藏方式
|
||||
-------------
|
||||
|
||||
默认是点击关闭菜单,可以关闭此功能。
|
||||
|
||||
````jsx
|
||||
import { Menu, Dropdown, Icon } from 'antd';
|
||||
|
||||
const OverlayVisible = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
visible: false
|
||||
};
|
||||
},
|
||||
handleMenuClick(e) {
|
||||
if (e.key === '3') {
|
||||
this.setState({ visible: false });
|
||||
}
|
||||
},
|
||||
handleVisibleChange(flag) {
|
||||
this.setState({ visible: flag });
|
||||
},
|
||||
render() {
|
||||
const menu = (
|
||||
<Menu onClick={this.handleMenuClick}>
|
||||
<Menu.Item key="1">点我不会关闭菜单</Menu.Item>
|
||||
<Menu.Item key="2">点我还是不会关闭菜单</Menu.Item>
|
||||
<Menu.Item key="3">点我才会关闭菜单</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
return (
|
||||
<Dropdown overlay={menu}
|
||||
onVisibleChange={this.handleVisibleChange}
|
||||
visible={this.state.visible}>
|
||||
<a className="ant-dropdown-link" href="#">
|
||||
鼠标移入 <Icon type="down" />
|
||||
</a>
|
||||
</Dropdown>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(<OverlayVisible />, mountNode);
|
||||
````
|
@ -33,3 +33,5 @@ english: Dropdown
|
||||
| onClick | 点击左侧按钮的回调,和 [Button](/components/button) 一致 | Function | 无 |
|
||||
| trigger | 触发下拉的行为 | "click" or "hover" | hover |
|
||||
| overlay | 菜单节点 | [Menu](/components/menu) | 无 |
|
||||
| visible | 菜单节点是否显示 | Bool | 无 |
|
||||
| onVisibleChange | 菜单节点显示状态改变时调用,参数为 {visible} | Function | 无 |
|
||||
|
Loading…
Reference in New Issue
Block a user