mirror of
https://github.com/element-plus/element-plus.git
synced 2024-11-21 01:02:59 +08:00
docs(components): [dropdown] use new display tag (#15378)
* docs(components): [dropdown] use new display tag * docs(components): [dropdown] format doc * docs(components): [dropdown] add delete tag for button type
This commit is contained in:
wzc520pyfm
GitHub
parent
07a1ac7583
commit
5fc967c63e
@ -83,65 +83,71 @@ dropdown/sizes
|
||||
|
||||
:::
|
||||
|
||||
## Dropdown Attributes
|
||||
## Dropdown API
|
||||
|
||||
| Name | Description | Type | Accepted Values | Default |
|
||||
| -------------------- | --------------------------------------------------------------------------------------------------------------------- | --------------- | -------------------------------------------------------- | -------------------------------------------------------------------------- |
|
||||
| type | menu button type, refer to `Button` Component, only works when `split-button` is true | string | — | — |
|
||||
| size | menu size, also works on the split button | string | large / default / small | default |
|
||||
| max-height | the max height of menu | string / number | — | — |
|
||||
| split-button | whether a button group is displayed | boolean | — | false |
|
||||
| disabled | Whether to disable | boolean | — | false |
|
||||
| placement | placement of pop menu | string | top/top-start/top-end/bottom/bottom-start/bottom-end | bottom |
|
||||
| trigger | how to trigger | string | hover/click/contextmenu | hover |
|
||||
| hide-on-click | whether to hide menu after clicking menu-item | boolean | — | true |
|
||||
| show-timeout | Delay time before show a dropdown (only works when trigger is `hover`) | number | — | 150 |
|
||||
| hide-timeout | Delay time before hide a dropdown (only works when trigger is `hover`) | number | — | 150 |
|
||||
| role | The ARIA role attribute for the dropdown menu. Depending on the use case, you may want to change this to 'navigation' | string | — | 'menu' |
|
||||
| tabindex | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Dropdown | number | — | 0 |
|
||||
| popper-class | custom class name for Dropdown's dropdown | string | — | — |
|
||||
| popper-options | [popper.js](https://popper.js.org/docs/v2/) parameters | Object | refer to [popper.js](https://popper.js.org/docs/v2/) doc | `{modifiers: [{name: 'computeStyles',options: {gpuAcceleration: false}}]}` |
|
||||
| teleported ^(2.2.20) | whether the dropdown popup is teleported to the body | boolean | — | true |
|
||||
### Dropdown Attributes
|
||||
|
||||
## Dropdown Slots
|
||||
| Name | Description | Type | Default |
|
||||
| -------------------- | --------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
|
||||
| type | menu button type, refer to `Button` Component, only works when `split-button` is true | ^[enum]`'' \| 'default' \| 'primary' \| 'success' \| 'warning' \| 'info' \| 'danger' \| 'text'(delete)` | '' |
|
||||
| size | menu size, also works on the split button | ^[enum]`'' \| 'large' \| 'default' \| 'small'` | '' |
|
||||
| max-height | the max height of menu | ^[string] / ^[number] | '' |
|
||||
| split-button | whether a button group is displayed | ^[boolean] | false |
|
||||
| disabled | whether to disable | ^[boolean] | false |
|
||||
| placement | placement of pop menu | ^[enum]`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end'` | bottom |
|
||||
| trigger | how to trigger | ^[enum]`'hover' \| 'click' \| 'contextmenu'` | hover |
|
||||
| hide-on-click | whether to hide menu after clicking menu-item | ^[boolean] | true |
|
||||
| show-timeout | delay time before show a dropdown (only works when trigger is `hover`) | ^[number] | 150 |
|
||||
| hide-timeout | delay time before hide a dropdown (only works when trigger is `hover`) | ^[number] | 150 |
|
||||
| role | the ARIA role attribute for the dropdown menu. Depending on the use case, you may want to change this to 'navigation' | ^[string] | menu |
|
||||
| tabindex | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Dropdown | ^[number] / ^[string] | 0 |
|
||||
| popper-class | custom class name for Dropdown's dropdown | ^[string] | '' |
|
||||
| popper-options | [popper.js](https://popper.js.org/docs/v2/) parameters | ^[object] | `{modifiers: [{name: 'computeStyles',options: {gpuAcceleration: false}}]}` |
|
||||
| teleported ^(2.2.20) | whether the dropdown popup is teleported to the body | ^[boolean] | true |
|
||||
|
||||
### Dropdown Slots
|
||||
|
||||
| Name | Description | Subtags |
|
||||
| -------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
|
||||
| — | content of Dropdown. Notice: Must be a valid html dom element (ex. `<span>, <button> etc.`) or `el-component`, to attach the trigger listener | — |
|
||||
| default | content of Dropdown. Notice: Must be a valid html dom element (ex. `<span>, <button> etc.`) or `el-component`, to attach the trigger listener | — |
|
||||
| dropdown | content of the Dropdown Menu, usually a `<el-dropdown-menu>` element | Dropdown-Menu |
|
||||
|
||||
## Dropdown Events
|
||||
### Dropdown Events
|
||||
|
||||
| Name | Description | Parameters |
|
||||
| -------------- | ----------------------------------------------------------------- | --------------------------------------------- |
|
||||
| click | if `split-button` is `true`, triggers when left button is clicked | — |
|
||||
| command | triggers when a dropdown item is clicked | the command dispatched from the dropdown item |
|
||||
| visible-change | triggers when the dropdown appears/disappears | true when it appears, and false otherwise |
|
||||
| Name | Description | Type |
|
||||
| -------------- | --------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- |
|
||||
| click | if `split-button` is `true`, triggers when left button is clicked | ^[Function]`(e: MouseEvent) => void` |
|
||||
| command | triggers when a dropdown item is clicked, the parameters is the command dispatched from the dropdown item | ^[Function]`(...args: any[]) => void` |
|
||||
| visible-change | triggers when the dropdown appears/disappears, the param is true when it appears, and false otherwise | ^[Function]`(val: boolean) => void` |
|
||||
|
||||
## Dropdown Methods
|
||||
### Dropdown Exposes
|
||||
|
||||
| Method | Description | Parameters |
|
||||
| ----------- | ----------------------- | ---------- |
|
||||
| handleOpen | open the dropdown menu | — |
|
||||
| handleClose | close the dropdown menu | — |
|
||||
| Method | Description | Type |
|
||||
| ----------- | ----------------------- | ----------------------- |
|
||||
| handleOpen | open the dropdown menu | ^[Function]`() => void` |
|
||||
| handleClose | close the dropdown menu | ^[Function]`() => void` |
|
||||
|
||||
## Dropdown-Menu Slots
|
||||
## Dropdown-Menu API
|
||||
|
||||
| Name | Description | Subtags |
|
||||
| ---- | ------------------------ | ------------- |
|
||||
| — | content of Dropdown Menu | Dropdown-Item |
|
||||
### Dropdown-Menu Slots
|
||||
|
||||
## Dropdown-Item Attributes
|
||||
| Name | Description | Subtags |
|
||||
| ------- | ------------------------ | ------------- |
|
||||
| default | content of Dropdown Menu | Dropdown-Item |
|
||||
|
||||
| Name | Description | Type | Accepted Values | Default |
|
||||
| -------- | ----------------------------------------------------------- | --------------------- | --------------- | ------- |
|
||||
| command | a command to be dispatched to Dropdown's `command` callback | string/number/object | — | — |
|
||||
| disabled | whether the item is disabled | boolean | — | false |
|
||||
| divided | whether a divider is displayed | boolean | — | false |
|
||||
| icon | custom icon | `string \| Component` | — | — |
|
||||
## Dropdown-Item API
|
||||
|
||||
## Dropdown-Item Slots
|
||||
### Dropdown-Item Attributes
|
||||
|
||||
| Name | Description |
|
||||
| ---- | -------------------------- |
|
||||
| — | customize of Dropdown Item |
|
||||
| Name | Description | Type | Default |
|
||||
| -------- | ----------------------------------------------------------- | --------------------------------- | ------- |
|
||||
| command | a command to be dispatched to Dropdown's `command` callback | ^[string] / ^[number] / ^[object] | — |
|
||||
| disabled | whether the item is disabled | ^[boolean] | false |
|
||||
| divided | whether a divider is displayed | ^[boolean] | false |
|
||||
| icon | custom icon | ^[string] / ^[Component] | — |
|
||||
|
||||
### Dropdown-Item Slots
|
||||
|
||||
| Name | Description |
|
||||
| ------- | -------------------------- |
|
||||
| default | customize of Dropdown Item |
|
||||
|
||||
@ -26,28 +26,49 @@ export interface IElDropdownInstance {
|
||||
}
|
||||
|
||||
export const dropdownProps = buildProps({
|
||||
/**
|
||||
* @description how to trigger
|
||||
*/
|
||||
trigger: useTooltipTriggerProps.trigger,
|
||||
effect: {
|
||||
...useTooltipContentProps.effect,
|
||||
default: 'light',
|
||||
},
|
||||
/**
|
||||
* @description menu button type, refer to `Button` Component, only works when `split-button` is true
|
||||
*/
|
||||
type: {
|
||||
type: definePropType<ButtonType>(String),
|
||||
},
|
||||
/**
|
||||
* @description placement of pop menu
|
||||
*/
|
||||
placement: {
|
||||
type: definePropType<Placement>(String),
|
||||
default: 'bottom',
|
||||
},
|
||||
/**
|
||||
* @description [popper.js](https://popper.js.org/docs/v2/) parameters
|
||||
*/
|
||||
popperOptions: {
|
||||
type: definePropType<Partial<Options>>(Object),
|
||||
default: () => ({}),
|
||||
},
|
||||
id: String,
|
||||
/**
|
||||
* @description menu size, also works on the split button
|
||||
*/
|
||||
size: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
/**
|
||||
* @description whether a button group is displayed
|
||||
*/
|
||||
splitButton: Boolean,
|
||||
/**
|
||||
* @description whether to hide menu after clicking menu-item
|
||||
*/
|
||||
hideOnClick: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
@ -56,30 +77,48 @@ export const dropdownProps = buildProps({
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
/**
|
||||
* @description delay time before show a dropdown (only works when trigger is `hover`)
|
||||
*/
|
||||
showTimeout: {
|
||||
type: Number,
|
||||
default: 150,
|
||||
},
|
||||
/**
|
||||
* @description delay time before hide a dropdown (only works when trigger is `hover`)
|
||||
*/
|
||||
hideTimeout: {
|
||||
type: Number,
|
||||
default: 150,
|
||||
},
|
||||
/**
|
||||
* @description [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Dropdown
|
||||
*/
|
||||
tabindex: {
|
||||
type: definePropType<number | string>([Number, String]),
|
||||
default: 0,
|
||||
},
|
||||
/**
|
||||
* @description the max height of menu
|
||||
*/
|
||||
maxHeight: {
|
||||
type: definePropType<number | string>([Number, String]),
|
||||
default: '',
|
||||
},
|
||||
/**
|
||||
* @description custom class name for Dropdown's dropdown
|
||||
*/
|
||||
popperClass: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
/**
|
||||
* @description whether to disable
|
||||
*/
|
||||
disabled: Boolean,
|
||||
/**
|
||||
* @description the ARIA role attribute for the dropdown menu. Depending on the use case, you may want to change this to 'navigation'
|
||||
*/
|
||||
role: {
|
||||
type: String,
|
||||
default: 'menu',
|
||||
@ -87,17 +126,32 @@ export const dropdownProps = buildProps({
|
||||
buttonProps: {
|
||||
type: definePropType<ButtonProps>(Object),
|
||||
},
|
||||
/**
|
||||
* @description whether the dropdown popup is teleported to the body
|
||||
*/
|
||||
teleported: useTooltipContentProps.teleported,
|
||||
} as const)
|
||||
|
||||
export const dropdownItemProps = buildProps({
|
||||
/**
|
||||
* @description a command to be dispatched to Dropdown's `command` callback
|
||||
*/
|
||||
command: {
|
||||
type: [Object, String, Number],
|
||||
default: () => ({}),
|
||||
},
|
||||
/**
|
||||
* @description whether the item is disabled
|
||||
*/
|
||||
disabled: Boolean,
|
||||
/**
|
||||
* @description whether a divider is displayed
|
||||
*/
|
||||
divided: Boolean,
|
||||
textValue: String,
|
||||
/**
|
||||
* @description custom icon
|
||||
*/
|
||||
icon: {
|
||||
type: iconPropType,
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user