Dropdown 下拉菜单

向下弹出的列表。

何时使用

当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。

API

属性如下

成员	说明	类型	默认值
trigger	触发下拉的行为	"click" or "hover"	hover
overlay	菜单节点	React.Element	无
onSelect	选择后的回调	function(e) {}	无

菜单可由 antd.Menu 取得，可设置 onSelect 回调，菜单还包括菜单项 antd.Menu.Item，分割线 antd.Menu.Divider。

注意： Menu.Item 必须设置唯一的 key 属性。

组件演示

var Menu = antd.Menu;
var Dropdown = antd.Dropdown;

var menu = <Menu>
  <Menu.Item>
    <a target="_blank" href="http://www.alipay.com/">第一个菜单项</a>
  </Menu.Item>
  <Menu.Item>
    <a target="_blank" href="http://www.taobao.com/">第二个菜单项</a>
  </Menu.Item>
  <Menu.Item>
    <a target="_blank" href="http://www.tmall.com/">第三个菜单项</a>
  </Menu.Item>
</Menu>;

React.render(
  <Dropdown overlay={menu}>
    <button className="ant-btn ant-btn-menu">
      某按钮 <i className="anticon anticon-down"></i>
    </button>
  </Dropdown>
, document.getElementById('components-dropdown-demo-basic'));

基本

最简单的下拉菜单。

var Menu = antd.Menu;
var Dropdown = antd.Dropdown;

var menu = <Menu>
  <Menu.Item key="0">
    <a href="http://www.alipay.com/">第一个菜单项</a>
  </Menu.Item>
  <Menu.Item key="1">
    <a href="http://www.taobao.com/">第二个菜单项</a>
  </Menu.Item>
  <Menu.Divider/>
  <Menu.Item key="3">第三个菜单项</Menu.Item>
</Menu>;

React.render(<div>
  <Dropdown overlay={menu} trigger="click">
    <button className="ant-btn ant-btn-primary ant-btn-menu">
      点击触发 <i className="anticon anticon-down"></i>
    </button>
  </Dropdown>
  <Dropdown overlay={menu}>
    <button className="ant-btn ant-btn-menu">
      鼠标移入 <i className="anticon anticon-down"></i>
    </button>
  </Dropdown>
</div>, document.getElementById('components-dropdown-demo-trigger'));

触发方式

点击或鼠标移入触发。

var Menu = antd.Menu;
var Dropdown = antd.Dropdown;

var menu = <Menu>
  <Menu.Item key="0">
    <a target="_blank" href="http://www.alipay.com/">第一个菜单项</a>
  </Menu.Item>
  <Menu.Item key="1">
    <a target="_blank" href="http://www.taobao.com/">第二个菜单项</a>
  </Menu.Item>
  <Menu.Divider/>
  <Menu.Item key="3" disabled>第三个菜单项（不可用）</Menu.Item>
</Menu>;

React.render(
  <Dropdown overlay={menu}>
    <button className="ant-btn ant-btn-menu">
      鼠标移入 <i className="anticon anticon-down"></i>
    </button>
  </Dropdown>
, document.getElementById('components-dropdown-demo-item'));

其他元素

分割线和不可用菜单项。

var Menu = antd.Menu;
var Dropdown = antd.Dropdown;
var onSelect = function ({key}){
  alert('选中了菜单' + key);
};

var menu = <Menu onSelect={onSelect}>
  <Menu.Item key="1">第一个菜单项</Menu.Item>
  <Menu.Item key="2">第二个菜单项</Menu.Item>
  <Menu.Item key="3">第三个菜单项</Menu.Item>
</Menu>;

React.render(
  <Dropdown overlay={menu}>
    <button className="ant-btn ant-btn-menu">
      鼠标移入，点击菜单 <i className="anticon anticon-down"></i>
    </button>
  </Dropdown>
, document.getElementById('components-dropdown-demo-event'));

触发事件

点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作。