Dropdown下拉菜单

注意Breadcrumb如果是Dropdown的上一份元素或下一个元素，会影响Dropdown下拉菜单的出现时方向。

基本属性：

 

参数	说明	类型	默认值	版本
disabled	菜单是否禁用	boolean	-
getPopupContainer	菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。示例	Function(triggerNode)	() => document.body
overlay	菜单	Menu | () => Menu	-
overlayClassName	下拉根元素的类名称	string	-	3.11.0
overlayStyle	下拉根元素的样式	object	-	3.11.0
placement	菜单弹出位置：bottomLeft bottomCenter bottomRight topLeft topCenter topRight	String	bottomLeft
trigger	触发下拉的行为, 移动端不支持 hover	Array<click|hover|contextMenu>	['hover']
visible	菜单是否显示	boolean	-
onVisibleChange	菜单显示状态改变时调用，参数为 visible	Function(visible)	-

overlay:下拉的菜单项，Menu

placement：下拉菜单出现的方位：string<bottomLeft | bottomCenter | bottomRight | topLeft | topCenter | topRight>

trigger：触发显示下拉菜单的方式： Array<click|hover|contextMenu>

基本使用：

const menu = (
    <Menu>
      <Menu.Item>
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="http://www.alipay.com/"
        >
          1st menu item
        </a>
      </Menu.Item>
      <Menu.Item>
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="http://www.taobao.com/"
        >
          2nd menu item
        </a>
      </Menu.Item>
      <Menu.Item>
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="http://www.tmall.com/"
        >
          3rd menu item
        </a>
      </Menu.Item>
    </Menu>
  )

<Dropdown overlay={menu} placement="topLeft" trigger={['click']}

> <Button>topLeft</Button> </Dropdown>

 

 

getPopupContainer改变【 Dropdown的Menu 】的父节点（默认是body）,选取触发者（也是Dropdown）的父节点 作为 Menu的父节点：

getPopupContainer={(triggerNode) => {
   return triggerNode.parentNode || document.body;
}}

　　

按钮型下拉菜单：

Dropdown.Button属性： 

 

参数	说明	类型	默认值	版本
disabled	菜单是否禁用	boolean	-
icon	右侧的 icon	ReactNode	-	3.17.0
overlay	菜单	Menu	-
placement	菜单弹出位置：bottomLeft bottomCenter bottomRight topLeft topCenter topRight	String	bottomLeft
size	按钮大小，和 Button 一致	string	'default'
trigger	触发下拉的行为	Array<click|hover|contextMenu>	['hover']
type	按钮类型，和 Button 一致	string	'default'
visible	菜单是否显示	boolean	-
onClick	点击左侧按钮的回调，和 Button 一致	Function	-
onVisibleChange	菜单显示状态改变时调用，参数为 visible	Function	-

 

<Dropdown.Button overlay={menu} icon={<Icon type="user" />}>
      Dropdown
</Dropdown.Button>

　

上下文菜单（某区域内右击显示菜单）：

<Dropdown overlay={menu} trigger={['contextMenu']}>
    <div
      style={{
        textAlign: 'center',
        background: '#f7f7f7',
        height: 200,
        lineHeight: '200px',
        color: '#777',
      }}
    >
      Right Click on here
    </div>
  </Dropdown>

　　

链接型菜单：

<Dropdown overlay={menu}>
        <a className="ant-dropdown-link" onClick={(e) => e.preventDefault()}>
          Hover me <Icon type="down" />
        </a>
</Dropdown>

　　

 菜单：

菜单分割线：<Menu.Divider />

基本属性：

菜单类型：vertical horizontal inline

 

 

基本使用：

<Menu mode="horizontal">
        <Menu.Item>菜单项1</Menu.Item>
        <SubMenu title="菜单项2">
          <Menu.Item>菜单项2--子菜单项1</Menu.Item>
          <Menu.Item>菜单项2--子菜单项2</Menu.Item>
        </SubMenu>
</Menu>