Dropdown下拉選單
阿新 • • 發佈：2021-06-22
注意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 | 選單彈出位置：bottomLeftbottomCenterbottomRighttopLefttopCentertopRight |
String | bottomLeft |
|
| trigger | 觸發下拉的行為, 移動端不支援 hover | Array<click|hover|contextMenu> |
['hover'] |
|
| visible | 選單是否顯示 | boolean | - | |
| onVisibleChange | 選單顯示狀態改變時呼叫，引數為 visible | Function(visible) | - |
overlay:下拉的選單項，
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">
<Button>topLeft</Button>
</Dropdown>