mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-03 04:27:41 +08:00
2ee3d43534
* 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
62 lines
3.4 KiB
Markdown
62 lines
3.4 KiB
Markdown
---
|
|
category: Components
|
|
type: Navigation
|
|
title: Dropdown
|
|
cover: 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](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | `() => document.body` | |
|
|
| overlay(v-slot) | the dropdown menu | [Menu](/components/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](/components/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](/components/menu) | - | |
|
|
| placement | placement of pop menu: `bottomLeft` `bottom` `bottomRight` `topLeft` `top` `topRight` | String | `bottomLeft` | |
|
|
| size | size of the button, the same as [Button](/components/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](/components/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](/components/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 |
|