Code
<template>
<w-stack align-items="center" justify-content="center">
<w-popover>
<w-button label="Popover trigger"></w-button>
<div slot="content">
<w-spacer all="small">
<w-text>Popover content</w-text>
</w-spacer>
</div>
</w-popover>
</w-stack>
</template>
Props
|
Name |
Description |
Type |
Default |
Values |
|---|---|---|---|---|
|
v-model model-value v2, wc open v1 |
Controls whether the popover is open or not. |
boolean |
false |
false, true |
|
position |
Controls the position of the popover menu in relation to the trigger. `bottom-left` will align it to the bottom left of the trigger. `bottom-right` will align it to the bottom right of the trigger. `top-left`and 'top-right' will align it to the top left and right respectively. |
string |
bottom-left |
bottom-left, bottom, bottom-right, top-left, top, top-right, left-top, left, left-bottom, right-top, right, right-bottom |
|
target |
Type string or an actual DOM node where you want render component |
string|object |
body |
|
|
use-teleport |
When it is set to true, dropdown menu will teleport the content part into the body. |
boolean |
false |
false, true |
|
anchor |
Set an optional anchor element to align against, replacing the triggering element. |
string|object |
null |
|
Slots
|
Name |
Description |
|---|---|
|
default |
The slot where the trigger for the popover is placed |
|
content |
Default content for popover |
Events
|
Name |
Description |
Type |
|---|---|---|
|
open |
This event is emitted when the popover is open. |
{ "names": [ "Boolean" ] } |
|
close |
This event is emitted when the popover is closed. |
{ "names": [ "Boolean" ] } |
|
v-model update:modelValue v2, wc toggle v1 |
Emitted on popover open or close |
{ "names": [ "Boolean" ] } |