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

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