mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-02 03:08:21 +08:00
docs(components): [popover] use new display tag (#15387)
This commit is contained in:
wzc520pyfm
GitHub
parent
033867f919
commit
3ec8580bc0
@ -68,45 +68,53 @@ popover/directive-usage
|
||||
|
||||
:::
|
||||
|
||||
## Attributes
|
||||
## API
|
||||
|
||||
| Name | Description | Type | Accepted Values | Default |
|
||||
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------- | --------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
|
||||
| trigger | how the popover is triggered | string | click/focus/hover/contextmenu | hover |
|
||||
| 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, `Popover` is built with `Tooltip`, offset of `Popover` is `undefined`, but offset of `Tooltip` is 12 | number | — | 12 |
|
||||
| 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 | — | — |
|
||||
| popper-style | custom style for popover | string / object | — | — |
|
||||
| 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 |
|
||||
### Attributes
|
||||
|
||||
## Slots
|
||||
| Name | Description | Type | Default |
|
||||
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
|
||||
| trigger | how the popover is triggered | ^[enum]`'click' \| 'focus' \| 'hover' \| 'contextmenu'` | hover |
|
||||
| title | popover title | ^[string] | — |
|
||||
| effect | Tooltip theme, built-in theme: `dark` / `light` | ^[enum]`'dark' \| 'light'` | light |
|
||||
| content | popover content, can be replaced with a default `slot` | ^[string] | '' |
|
||||
| width | popover width | ^[string] / ^[number] | 150 |
|
||||
| placement | popover placement | ^[enum]`'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] / ^[null] | null |
|
||||
| offset | popover offset, `Popover` is built with `Tooltip`, offset of `Popover` is `undefined`, but offset of `Tooltip` is 12 | ^[number] | undefined |
|
||||
| transition | popover transition animation, the default is el-fade-in-linear | ^[string] | — |
|
||||
| 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] | `{modifiers: [{name: 'computeStyles',options: {gpuAcceleration: false}}]}` |
|
||||
| popper-class | custom class name for popover | ^[string] | — |
|
||||
| popper-style | custom style for popover | ^[string] / ^[object] | — |
|
||||
| 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] / ^[string] | 0 |
|
||||
| teleported | whether popover dropdown is teleported to the body | ^[boolean] | true |
|
||||
| persistent | when popover inactive and `persistent` is `false` , popover will be destroyed | ^[boolean] | true |
|
||||
|
||||
### Slots
|
||||
|
||||
| Name | Description |
|
||||
| --------- | ---------------------------------- |
|
||||
| — | text content of popover |
|
||||
| default | text content of popover |
|
||||
| reference | HTML element that triggers popover |
|
||||
|
||||
## Events
|
||||
### Events
|
||||
|
||||
| Name | Description | Parameters |
|
||||
| ------------ | -------------------------------------------- | ---------- |
|
||||
| show | triggers when popover shows | — |
|
||||
| before-enter | triggers when the entering transition before | — |
|
||||
| after-enter | triggers when the entering transition ends | — |
|
||||
| hide | triggers when popover hides | — |
|
||||
| before-leave | triggers when the leaving transition before | — |
|
||||
| after-leave | triggers when the leaving transition ends | — |
|
||||
| Name | Description | Type |
|
||||
| ------------ | -------------------------------------------- | ----------------------- |
|
||||
| show | triggers when popover shows | ^[Function]`() => void` |
|
||||
| before-enter | triggers when the entering transition before | ^[Function]`() => void` |
|
||||
| after-enter | triggers when the entering transition ends | ^[Function]`() => void` |
|
||||
| hide | triggers when popover hides | ^[Function]`() => void` |
|
||||
| before-leave | triggers when the leaving transition before | ^[Function]`() => void` |
|
||||
| after-leave | triggers when the leaving transition ends | ^[Function]`() => void` |
|
||||
|
||||
### Exposes
|
||||
|
||||
| Name | Description | Type |
|
||||
| ------------ | ------------ | ----------------------- |
|
||||
| hide | hide popover | ^[Function]`() => void` |
|
||||
|
||||
@ -8,51 +8,110 @@ import type { ExtractPropTypes, PropType } from 'vue'
|
||||
import type Popover from './popover.vue'
|
||||
|
||||
export const popoverProps = buildProps({
|
||||
/**
|
||||
* @description how the popover is triggered
|
||||
*/
|
||||
trigger: useTooltipTriggerProps.trigger,
|
||||
/**
|
||||
* @description popover placement
|
||||
*/
|
||||
placement: dropdownProps.placement,
|
||||
/**
|
||||
* @description whether Popover is disabled
|
||||
*/
|
||||
disabled: useTooltipTriggerProps.disabled,
|
||||
/**
|
||||
* @description whether popover is visible
|
||||
*/
|
||||
visible: useTooltipContentProps.visible,
|
||||
/**
|
||||
* @description popover transition animation
|
||||
*/
|
||||
transition: useTooltipContentProps.transition,
|
||||
/**
|
||||
* @description parameters for [popper.js](https://popper.js.org/docs/v2/)
|
||||
*/
|
||||
popperOptions: dropdownProps.popperOptions,
|
||||
/**
|
||||
* @description [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Popover
|
||||
*/
|
||||
tabindex: dropdownProps.tabindex,
|
||||
/**
|
||||
* @description popover content, can be replaced with a default `slot`
|
||||
*/
|
||||
content: useTooltipContentProps.content,
|
||||
/**
|
||||
* @description custom style for popover
|
||||
*/
|
||||
popperStyle: useTooltipContentProps.popperStyle,
|
||||
/**
|
||||
* @description custom class name for popover
|
||||
*/
|
||||
popperClass: useTooltipContentProps.popperClass,
|
||||
enterable: {
|
||||
...useTooltipContentProps.enterable,
|
||||
default: true,
|
||||
},
|
||||
/**
|
||||
* @description Tooltip theme, built-in theme: `dark` / `light`
|
||||
*/
|
||||
effect: {
|
||||
...useTooltipContentProps.effect,
|
||||
default: 'light',
|
||||
},
|
||||
/**
|
||||
* @description whether popover dropdown is teleported to the body
|
||||
*/
|
||||
teleported: useTooltipContentProps.teleported,
|
||||
/**
|
||||
* @description popover title
|
||||
*/
|
||||
title: String,
|
||||
|
||||
/**
|
||||
* @description popover width
|
||||
*/
|
||||
width: {
|
||||
type: [String, Number],
|
||||
default: 150,
|
||||
},
|
||||
/**
|
||||
* @description popover offset
|
||||
*/
|
||||
offset: {
|
||||
type: Number,
|
||||
default: undefined,
|
||||
},
|
||||
/**
|
||||
* @description delay of appearance, in millisecond
|
||||
*/
|
||||
showAfter: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
/**
|
||||
* @description delay of disappear, in millisecond
|
||||
*/
|
||||
hideAfter: {
|
||||
type: Number,
|
||||
default: 200,
|
||||
},
|
||||
/**
|
||||
* @description timeout in milliseconds to hide tooltip
|
||||
*/
|
||||
autoClose: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
/**
|
||||
* @description 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)
|
||||
*/
|
||||
showArrow: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
/**
|
||||
* @description when popover inactive and `persistent` is `false` , popover will be destroyed
|
||||
*/
|
||||
persistent: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user