vuecssuiant-designantdreactantantd-vueenterprisefrontendui-designvue-antdvue-antd-uivue3vuecomponent
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
3.8 KiB
3.8 KiB
category | type | title | cover | coverDark |
---|---|---|---|---|
Components | Navigation | Dropdown | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*mBBcQ6goljkAAAAAAAAAAAAADrJ8AQ/original | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*5qm4S4Zgh2QAAAAAAAAAAAAADrJ8AQ/original |
A dropdown list.
When To Use
When there are more than a few options to choose from, you can wrap them in a Dropdown
. By hovering or clicking on the trigger, a dropdown menu will appear, which allows you to choose an option and execute the relevant action.
API
Dropdown
Property | Description | Type | Default | Version |
---|---|---|---|---|
align | this value will be merged into placement's config, please refer to the settings dom-align | Object | - | |
arrow | Whether the dropdown arrow should be open | boolean | { pointAtCenter: boolean } | false | 3.3.0 |
destroyPopupOnHide | Whether destroy dropdown when hidden | boolean | false | |
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(v-slot) | the dropdown 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 bottom bottomRight topLeft top 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'] |
|
open(v-model) | whether the dropdown menu is open | boolean | - | 4.0 |
events
Events Name | Description | Arguments | Version |
---|---|---|---|
openChange | a callback function takes an argument: open , is executed when the open state is changed. Not trigger when hidden by click item |
function(open) | 4.0 |
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 (appears on the right) | vNode | slot | - | 1.5.0 |
loading | Set the loading status of button | boolean | { delay: number } | false | 3.0 |
overlay(v-slot) | the dropdown menu | Menu | - | |
placement | placement of pop menu: bottomLeft bottom bottomRight topLeft top 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 |
|
open(v-model) | whether the dropdown menu is open | boolean | - |
Dropdown.Button events
Events Name | Description | Arguments | Version |
---|---|---|---|
click | a callback function, the same as Button, which will be executed when you click the button on the left | Function | |
openChange | a callback function takes an argument: open , is executed when the open state is changed. Not trigger when hidden by click item |
Function | 4.0 |