Dropdown 下拉菜单

向下弹出的列表。

何时使用#

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

API#

属性如下

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

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

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

DropdownButton#

成员	说明	类型	默认值
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);

多级菜单

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