mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-29 21:59:41 +08:00
2.8 KiB
2.8 KiB
category | type | title |
---|---|---|
Components | Navigation | Dropdown |
A dropdown list.
When To Use
If there are too many operations to display, you can wrap them in a Dropdown
. By clicking/hovering on the trigger, a dropdown menu should appear, which allows you to choose one option and execute relevant actions.
API
Dropdown
Property | Description | Type | Default |
---|---|---|---|
disabled | whether the dropdown menu is disabled | boolean | - |
getPopupContainer | to set the container of the dropdown menu. The default is to create a div element in body , you can reset it to the scrolling area and make a relative reposition. example |
Function(triggerNode) | () => document.body |
overlay | the dropdown menu | Menu | () => Menu | - |
overlayClassName | Class name of the dropdown root element | string | - |
overlayStyle | Style of the dropdown root element | object | - |
placement | placement of pop menu: bottomLeft bottomCenter bottomRight topLeft topCenter topRight |
String | bottomLeft |
trigger | the trigger mode which executes the drop-down action, hover doesn't work on mobile device | Array<click |hover |contextMenu > |
['hover'] |
visible | whether the dropdown menu is visible | boolean | - |
onVisibleChange | a callback function takes an argument: visible , is executed when the visible state is changed |
Function(visible) | - |
You should use Menu as overlay
. The menu items and dividers are also available by using Menu.Item
and Menu.Divider
.
Warning: You must set a unique
key
forMenu.Item
.Menu of Dropdown is unselectable by default, you can make it selectable via
<Menu selectable>
.
Dropdown.Button
Property | Description | Type | Default | Version |
---|---|---|---|---|
disabled | whether the dropdown menu is disabled | boolean | - | |
icon | icon of right | ReactNode | - | 3.17.0 |
overlay | the dropdown menu | Menu | - | |
placement | placement of pop menu: bottomLeft bottomCenter bottomRight topLeft topCenter topRight |
String | bottomLeft |
|
size | size of the button, the same as Button | string | default |
|
trigger | the trigger mode which executes the drop-down action | Array<click |hover |contextMenu > |
['hover'] |
|
type | type of the button, the same as Button | string | default |
|
visible | whether the dropdown menu is visible | boolean | - | |
onClick | a callback function, the same as Button, which will be executed when you click the button on the left | Function | - | |
onVisibleChange | a callback function takes an argument: visible , is executed when the visible state is changed |
Function | - |