Dropdown 下拉菜单

向下弹出的列表。

何时使用#

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

API#

属性如下

成员 说明 类型 默认值
trigger 触发下拉的行为 ['click'] or ['hover'] ['hover']
overlay 菜单节点 Menu 无

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

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

成员 说明 类型 默认值
type 按钮类型，和 Button 一致 String 'default'
onClick 点击左侧按钮的回调，和 Button 一致 Function 无
trigger 触发下拉的行为 "click" or "hover" hover
overlay 菜单节点 Menu 无

代码演示 

import { Menu, Dropdown, Icon } from 'antd';

const 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>
);

ReactDOM.render(
  <Dropdown overlay={menu}>
    <a className="ant-dropdown-link" href="#">
      触发链接 <Icon type="down" />
    </a>
  </Dropdown>
, mountNode);
基本

最简单的下拉菜单。

import { Menu, Dropdown, Icon } from 'antd';

const 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>
);

ReactDOM.render(<div>
  <Dropdown overlay={menu} trigger={['click']}>
    <a className="ant-dropdown-link" href="#">
      点击触发 <Icon type="down" />
    </a>
  </Dropdown>
</div>, mountNode);
触发方式

默认是移入触发菜单，可以点击触发。

import { Menu, Dropdown } from 'antd';
const DropdownButton = Dropdown.Button;

const 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>
);

ReactDOM.render(
  <DropdownButton overlay={menu} type="primary">
    某功能按钮
  </DropdownButton>
, mountNode);
带下拉框的按钮

左边是按钮，右边是额外的相关功能菜单。

import { Menu, Dropdown, Icon } from 'antd';

const 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>
);

ReactDOM.render(
  <Dropdown overlay={menu}>
    <a className="ant-dropdown-link" href="#">
      鼠标移入 <Icon type="down" />
    </a>
  </Dropdown>
, mountNode);
其他元素

分割线和不可用菜单项。

import { Menu, Dropdown, Icon } from 'antd';
const onClick = function ({ key }) {
  console.log(`点击了菜单${key}`);
};

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

ReactDOM.render(
  <Dropdown overlay={menu}>
    <a className="ant-dropdown-link" href="#">
      鼠标移入，点击菜单 <Icon type="down" />
    </a>
  </Dropdown>
, mountNode);
触发事件

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

import { Menu, Dropdown, Icon } from 'antd';
const SubMenu = Menu.SubMenu;

const menu = (
  <Menu>
    <Menu.Item>第一个菜单项</Menu.Item>
    <Menu.Item>第二个菜单项</Menu.Item>
    <SubMenu title="子菜单">
      <Menu.Item>第三个菜单项</Menu.Item>
      <Menu.Item>第四个菜单项</Menu.Item>
    </SubMenu>
  </Menu>
);

ReactDOM.render(
  <Dropdown overlay={menu}>
    <a className="ant-dropdown-link" href="#">
      多级菜单 <Icon type="down" />
    </a>
  </Dropdown>
, mountNode);
多级菜单

传入的菜单里有多个层级。