74 lines
2.3 KiB
Markdown
74 lines
2.3 KiB
Markdown
|
# Popover
|
||
|
|
|
||
|
|
## Props
|
||
|
|
|
||
|
|
| Name | Type | Default | Description |
|
||
|
|
| -------------- | -------------------------------------- | -------- | --------------------------------------------------------------------------------------------------- |
|
||
|
|
| `popoverClass` | string | | the classes contained in `popoverClass` are added on the element "div.o_popover" |
|
||
|
|
| `position` | "bottom" \| "top" \| "left" \| "right" | "bottom" | determine the position of the popover |
|
||
|
|
| `target` | string | | if provided then the popover will be placed around this target. Selector can match multiple element |
|
||
|
|
| `trigger` | "manual" \| "click" \| "hover" | "click" | determine how the popover is triggered |
|
||
|
|
|
||
|
|
## Slots
|
||
|
|
|
||
|
|
Popovers can be configured with slot
|
||
|
|
|
||
|
|
The `default` slot can be used to define the popover's content
|
||
|
|
|
||
|
|
```xml
|
||
|
|
<Popover>
|
||
|
|
Content
|
||
|
|
</Popover>
|
||
|
|
```
|
||
|
|
|
||
|
|
Popover's target can be defined with props but there is also a slot to define it.
|
||
|
|
|
||
|
|
With props
|
||
|
|
|
||
|
|
```xml
|
||
|
|
<Popover target="'.popover-target'">
|
||
|
|
Content
|
||
|
|
</Popover>
|
||
|
|
```
|
||
|
|
|
||
|
|
With slot
|
||
|
|
|
||
|
|
```xml
|
||
|
|
<Popover>
|
||
|
|
Content
|
||
|
|
<t t-set-slot="target">
|
||
|
|
<button>Click me to open the popover</button>
|
||
|
|
</t>
|
||
|
|
</Popover>
|
||
|
|
```
|
||
|
|
|
||
|
|
## Events
|
||
|
|
|
||
|
|
Popover can trigger a `popover-closed` event when it wants to close.
|
||
|
|
This event is usually triggered by clicking outside the popover and the target
|
||
|
|
but can be triggered manually inside the popover too.
|
||
|
|
|
||
|
|
```xml
|
||
|
|
<Popover>
|
||
|
|
<header>
|
||
|
|
<t t-esc="title" />
|
||
|
|
<button t-on-click="trigger('popover-closed')">x</button>
|
||
|
|
</header>
|
||
|
|
<div>
|
||
|
|
Popover's content
|
||
|
|
</div>
|
||
|
|
<t t-set-slot="target">
|
||
|
|
<button>Click me to open the popover</button>
|
||
|
|
</t>
|
||
|
|
</Popover>
|
||
|
|
```
|
||
|
|
|
||
|
|
Popover also listens on the `popover-compute` event to re-compute it's
|
||
|
|
position or size when children need to.
|
||
|
|
|
||
|
|
## Location in the dom
|
||
|
|
|
||
|
|
The Popover class uses a portal to locate itself in a div with class
|
||
|
|
`o_popover_container` but the communication with the parent goes as
|
||
|
|
usual: via props or custom/dom events.
|