diff --git a/packages/devui-vue/docs/en-US/components/popover/index.md b/packages/devui-vue/docs/en-US/components/popover/index.md new file mode 100644 index 0000000000000000000000000000000000000000..936183a11ce58ecc22f679642ee6b8c035283b57 --- /dev/null +++ b/packages/devui-vue/docs/en-US/components/popover/index.md @@ -0,0 +1,272 @@ +# Popover +Simple text prompt box. + +### When To Use +Used to notify users of non-critical problems or to indicate that a control is in a special situation. + +### Basic Usage +When Popover pops up, it is positioned based on the contents of the reference slot. +:::demo +```vue + + +``` +::: + +### Custom Tips +The HTMLElement or TemplateRef type can be transferred. + +:::demo + +```vue + + + +``` +::: + + +### Position +A total of 12 pop-up positions are supported. + +:::demo + +```vue + + +``` + +::: + +### Delay Trigger +Only when the trigger type is hover. This event is triggered only when the mouse pointer is moved in for more than `mouseEnterDelay` milliseconds. The default value is 150 ms to prevent flashing caused by unintentional strokes. The toolTip component is hidden only after `mouseLeaveDelay`milliseconds after the cursor is moved out. The default value is 100 milliseconds. + +:::demo + +```vue + + +``` +::: + +### DPopover + +#### Props + +| **Parameter** | **Type** | **Default** | **Description** | **Jump to Demo** | +| ---- | ---- | ---- | ---- | ---- | +| content | `string` | defalut |Required. The display content of the pop-up box or template reference | [Custom Tips](#custom-tips) | +| visible | `boolean` | false | Optional. Initial pop-up status of the pop-up dialog box | [Basic Usage](#basic-usage) | +| trigger | `string` | click | Pop-up message triggering mode | [Basic Usage](#basic-usage) | +| popType | `string` | default | Optional. Which indicates the type of the pop-up box with different styles | [Basic Usage](#basic-usage) | +| zIndex | `number` | 1060 | Optional. Z-index value, which is used to manually control the height of the layer | [Basic Usage](#basic-usage) | +| positionType | `string` | bottom | Optional. Specifies the content pop-up direction. For example, top-left indicates the content pop-up direction, and left indicates the left-aligned content. | [Position](#Position) | +| showAnimation | `boolean` | true | Optional. Whether to display animation | [Basic Usage](#basic-usage) | +| popMaxWidth | `number` | - | Optional. Limit the maximum width of the pop-up box (`px`) | [Basic Usage](#basic-usage) | +| mouseEnterDelay | `number` | 150 | Optional. Only when the type of trigger is hover. Delay for displaying Popover after the mouse is enter. The unit is `ms` | [Delay Trigger](#delay-trigger) | +| mouseLeaveDelay | `number` | 100 | Optional. Only when the type of trigger is hover. Delay for hiding Tooltip after the mouse is leave. The unit is `ms` | [Delay Trigger](#delay-trigger)| +| popoverStyle | `{[klass:string]:any;}` | - | Optional. When you need to change the style of the pop-up layer, the same background color is applied to the arrows. Style. Refer to [ngStyle](https://angular.io/api/common/NgStyle) | [Custom Tips](#custom-tips) | + + + +#### Slot + +| name | description | +| --------- | --------------------------------------------------------- | +| content | Custom content | +| reference | Triggers the contents of the element displayed by Popover | +