From 93afa6b1f1c5b106f732ad5f9dd040633f66c930 Mon Sep 17 00:00:00 2001 From: CatsAndMice Date: Sat, 4 Dec 2021 19:33:20 +0800 Subject: [PATCH] =?UTF-8?q?docs(popover):=20=E5=A2=9E=E5=8A=A0=E8=8B=B1?= =?UTF-8?q?=E6=96=87=E4=BD=BF=E7=94=A8=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../docs/en-US/components/popover/index.md | 272 ++++++++++++++++++ 1 file changed, 272 insertions(+) create mode 100644 packages/devui-vue/docs/en-US/components/popover/index.md 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 00000000..936183a1 --- /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 | + -- Gitee