mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-05 20:58:22 +08:00
docs(components): fix popper-options to provide working example (#8793)
popper-options attribute allow to pass popper js options the example was wrong and misleading. closed #8464 Co-authored-by: RealityBoy <1923740402@qq.com>
This commit is contained in:
amaury-hanser
GitHub
parent
beae9db676
commit
97380c5525
@ -79,22 +79,22 @@ dropdown/sizes
|
||||
|
||||
## Dropdown Attributes
|
||||
|
||||
| Attribute | 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 | — | 250 |
|
||||
| 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 | `{ boundariesElement: 'body', gpuAcceleration: false }` |
|
||||
| Attribute | 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 | — | 250 |
|
||||
| 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}}]}` |
|
||||
|
||||
## Dropdown Slots
|
||||
|
||||
|
||||
@ -64,27 +64,27 @@ popover/directive-usage
|
||||
|
||||
## Attributes
|
||||
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------- | --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
|
||||
| trigger | how the popover is triggered | string | click/focus/hover/contextmenu | click |
|
||||
| title | popover title | string | — | — |
|
||||
| effect | Tooltip theme, built-in theme: `dark` / `light` | string | string | light |
|
||||
| content | popover content, can be replaced with a default `slot` | string | — | — |
|
||||
| width | popover width | string / number | — | Min width 150px |
|
||||
| placement | popover placement | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
|
||||
| disabled | whether Popover is disabled | boolean | — | false |
|
||||
| visible / v-model:visible | whether popover is visible | Boolean | — | false |
|
||||
| offset | popover offset | number | — | 0 |
|
||||
| transition | popover transition animation | string | — | el-fade-in-linear |
|
||||
| show-arrow | whether a tooltip arrow is displayed or not. For more info, please refer to [ElPopper](https://github.com/element-plus/element-plus/tree/dev/packages/components/popper) | boolean | — | true |
|
||||
| popper-options | parameters for [popper.js](https://popper.js.org/docs/v2/) | object | please refer to [popper.js](https://popper.js.org/docs/v2/) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
|
||||
| popper-class | custom class name for popover | string | — | — |
|
||||
| show-after | delay of appearance, in millisecond | number | — | 0 |
|
||||
| hide-after | delay of disappear, in millisecond | number | — | 200 |
|
||||
| auto-close | timeout in milliseconds to hide tooltip | number | — | 0 |
|
||||
| tabindex | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Popover | number | — | — |
|
||||
| teleported | whether popover dropdown is teleported to the body | boolean | true / false | true |
|
||||
| persistent | when popover inactive and `persistent` is `false` , popover will be destroyed | boolean | — | true |
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------- | --------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
|
||||
| trigger | how the popover is triggered | string | click/focus/hover/contextmenu | click |
|
||||
| title | popover title | string | — | — |
|
||||
| effect | Tooltip theme, built-in theme: `dark` / `light` | string | string | light |
|
||||
| content | popover content, can be replaced with a default `slot` | string | — | — |
|
||||
| width | popover width | string / number | — | Min width 150px |
|
||||
| placement | popover placement | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
|
||||
| disabled | whether Popover is disabled | boolean | — | false |
|
||||
| visible / v-model:visible | whether popover is visible | Boolean | — | false |
|
||||
| offset | popover offset | number | — | 0 |
|
||||
| transition | popover transition animation | string | — | el-fade-in-linear |
|
||||
| show-arrow | whether a tooltip arrow is displayed or not. For more info, please refer to [ElPopper](https://github.com/element-plus/element-plus/tree/dev/packages/components/popper) | boolean | — | true |
|
||||
| popper-options | parameters for [popper.js](https://popper.js.org/docs/v2/) | object | please refer to [popper.js](https://popper.js.org/docs/v2/) | `{modifiers: [{name: 'computeStyles',options: {gpuAcceleration: false}}]}` |
|
||||
| popper-class | custom class name for popover | string | — | — |
|
||||
| show-after | delay of appearance, in millisecond | number | — | 0 |
|
||||
| hide-after | delay of disappear, in millisecond | number | — | 200 |
|
||||
| auto-close | timeout in milliseconds to hide tooltip | number | — | 0 |
|
||||
| tabindex | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Popover | number | — | — |
|
||||
| teleported | whether popover dropdown is teleported to the body | boolean | true / false | true |
|
||||
| persistent | when popover inactive and `persistent` is `false` , popover will be destroyed | boolean | — | true |
|
||||
|
||||
## Slots
|
||||
|
||||
|
||||
@ -142,32 +142,32 @@ tooltip/animations
|
||||
|
||||
## Attributes
|
||||
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------- | --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
|
||||
| append-to | which element the tooltip CONTENT appends to | CSSSelector \| HTMLElement | — | #el-popper-container-[randomValue] |
|
||||
| effect | Tooltip theme, built-in theme: `dark` / `light` | string | string | dark |
|
||||
| content | display content, can be overridden by `slot#content` | String | — | — |
|
||||
| raw-content | whether `content` is treated as HTML string | boolean | — | false |
|
||||
| placement | position of Tooltip | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
|
||||
| visible / v-model:visible | visibility of Tooltip | boolean | — | false |
|
||||
| disabled | whether Tooltip is disabled | boolean | — | false |
|
||||
| offset | offset of the Tooltip | number | — | 0 |
|
||||
| transition | animation name | string | — | el-fade-in-linear |
|
||||
| visible-arrow (will deprecate in 2.1.0 ) | whether an arrow is displayed. For more information, check [ElPopper](https://github.com/element-plus/element-plus/tree/dev/packages/components/popper) page | boolean | — | true |
|
||||
| popper-options | [popper.js](https://popper.js.org/docs/v2/) parameters | Object | refer to [popper.js](https://popper.js.org/docs/v2/) doc | `{ boundariesElement: 'body', gpuAcceleration: false }` |
|
||||
| show-after | delay of appearance, in millisecond | number | — | 0 |
|
||||
| show-arrow | whether the tooltip content has an arrow | boolean | true / false | true |
|
||||
| hide-after | delay of disappear, in millisecond | number | — | 200 |
|
||||
| auto-close | timeout in milliseconds to hide tooltip | number | — | 0 |
|
||||
| manual | whether to control Tooltip manually. `mouseenter` and `mouseleave` won't have effects if set to `true` | boolean | — | false |
|
||||
| popper-class | custom class name for Tooltip's popper | string | — | — |
|
||||
| enterable | whether the mouse can enter the tooltip | Boolean | — | true |
|
||||
| tabindex | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Tooltip | number | — | 0 |
|
||||
| teleported | whether tooltip content is teleported, if `true` it will be teleported to where `append-to` sets | boolean | true / false | true |
|
||||
| trigger | How should the tooltip be triggered (to show) | string | hover / click / focus / contextmenu | hover |
|
||||
| virtual-triggering | Indicates whether virtual triggering is enabled | boolean | — | false |
|
||||
| virtual-ref | Indicates the reference element to which the tooltip is attached | HTMLElement | — | — |
|
||||
| trigger-keys | When you click the mouse to focus on the trigger element, you can define a set of keyboard codes to control the display of tooltip through the keyboard | Array | — | `['Enter','Space']` |
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------- | --------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
|
||||
| append-to | which element the tooltip CONTENT appends to | CSSSelector \| HTMLElement | — | #el-popper-container-[randomValue] |
|
||||
| effect | Tooltip theme, built-in theme: `dark` / `light` | string | string | dark |
|
||||
| content | display content, can be overridden by `slot#content` | String | — | — |
|
||||
| raw-content | whether `content` is treated as HTML string | boolean | — | false |
|
||||
| placement | position of Tooltip | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
|
||||
| visible / v-model:visible | visibility of Tooltip | boolean | — | false |
|
||||
| disabled | whether Tooltip is disabled | boolean | — | false |
|
||||
| offset | offset of the Tooltip | number | — | 0 |
|
||||
| transition | animation name | string | — | el-fade-in-linear |
|
||||
| visible-arrow (will deprecate in 2.1.0 ) | whether an arrow is displayed. For more information, check [ElPopper](https://github.com/element-plus/element-plus/tree/dev/packages/components/popper) page | boolean | — | true |
|
||||
| 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}}]}` |
|
||||
| show-after | delay of appearance, in millisecond | number | — | 0 |
|
||||
| show-arrow | whether the tooltip content has an arrow | boolean | true / false | true |
|
||||
| hide-after | delay of disappear, in millisecond | number | — | 200 |
|
||||
| auto-close | timeout in milliseconds to hide tooltip | number | — | 0 |
|
||||
| manual | whether to control Tooltip manually. `mouseenter` and `mouseleave` won't have effects if set to `true` | boolean | — | false |
|
||||
| popper-class | custom class name for Tooltip's popper | string | — | — |
|
||||
| enterable | whether the mouse can enter the tooltip | Boolean | — | true |
|
||||
| tabindex | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Tooltip | number | — | 0 |
|
||||
| teleported | whether tooltip content is teleported, if `true` it will be teleported to where `append-to` sets | boolean | true / false | true |
|
||||
| trigger | How should the tooltip be triggered (to show) | string | hover / click / focus / contextmenu | hover |
|
||||
| virtual-triggering | Indicates whether virtual triggering is enabled | boolean | — | false |
|
||||
| virtual-ref | Indicates the reference element to which the tooltip is attached | HTMLElement | — | — |
|
||||
| trigger-keys | When you click the mouse to focus on the trigger element, you can define a set of keyboard codes to control the display of tooltip through the keyboard | Array | — | `['Enter','Space']` |
|
||||
|
||||
## Slots
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user