ant-design-vue/components/dropdown/index.en-US.md
tangjinzhou 2ee3d43534
Feat css var (#5327)
* style: affix & util

* feat(alert): add customIcon slot

* feat(anchor): ts type

* style: auto-complete

* feat: avatar add crossOrigin & maxPopoverTrigger

* style(backTop): v-show instead v-if

* style: badge

* style: breadcrumb

* feat: button add global size

* feat: update i18n

* feat: picker add disabledTime

* test: update snap

* doc: update img url

* style: fix Card tabs of left position

* doc: update cascader doc

* feat: collapse

* style: comment

* style: configprovider

* feat: date-picker add soem icon slot

* style: update descriptions style

* feat: add divider orientationMargin

* doc: update drawer

* feat: dropdown add destroyPopupOnHide & loading

* style: update empty

* feat: form add labelWrap

* style: update grid

* test: update grid snap

* fix: image ts error

* fix: mentions cannot select, close #5233

* doc: update pagination change info, close #5293

* fix: table dynamic expand error, close #5295

* style: remove not use

* release 3.0.0-beta.11

* doc: update typo

* feat: input add showCount

* feat: inputNumber add prefix slot

* style: update layout

* style: update list

* feat: add locale i18

* style: update locale ts

* style: update mentions

* feat: menu divider add dashed

* perf: menu

* perf: menu animate

* feat: modal method add wrapClassName

* style: update pageheader

* feat: update pagination ts

* feat: confirm add showCancel & promise

* doc: update popover

* style: update progress

* style: radio

* style: update rate、result、row

* feat: select add fieldNames

* feat: add skeleton button & input

* feat: spin tip support slot

* style: slider & space

* stype: update steps ts type

* style: update switch

* feat: table add tree filter

* test: update input sanp

* feat: table add filterMode...

* fix: tree autoExpandParent bug

* test: update input snap

* doc: tabs add destroyInactiveTabPane

* style: update tag

* style: update timeline & time-picker

* fix: Tooltip arrowPointAtCenter 1px shift bug

* feat: typography add enterEnterIcon triggerType

* doc: update tree-select

* fix: deps and TypeScript types

* style: udpate transfer

* style: update style

* doc: add colorScheme

* chore: add css var builg

* doc: sort api

* style: lint code

* doc: add css var

* test: update snap

* chore: add pre script

* chore: update lint

* perf: collapse animate

* perf: collapse tree

* perf: typography shaking when edit

* doc: update auto-complete demo

* fix: table tree not have animate

* feat: deprecated dropdown center placement

* feat: deprecated dropdown center placement

* test: update snap
2022-03-12 09:56:32 +08:00

3.4 KiB

category type title cover
Components Navigation Dropdown https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg

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
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']
visible(v-model) whether the dropdown menu is visible boolean -

events

Events Name Description Arguments
visibleChange a callback function takes an argument: visible, is executed when the visible state is changed. Not trigger when hidden by click item 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 for Menu.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
visible(v-model) whether the dropdown menu is visible boolean -

Dropdown.Button events

Events Name Description Arguments
click a callback function, the same as Button, which will be executed when you click the button on the left Function
visibleChange a callback function takes an argument: visible, is executed when the visible state is changed. Not trigger when hidden by click item Function