98 lines
2.0 KiB
ReStructuredText
98 lines
2.0 KiB
ReStructuredText
|
|
Popover
|
|
=======
|
|
|
|
Props
|
|
-----
|
|
|
|
.. list-table::
|
|
:header-rows: 1
|
|
|
|
* - 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
|
|
|
|
.. code-block:: xml
|
|
|
|
<Popover>
|
|
Content
|
|
</Popover>
|
|
|
|
Popover's target can be defined with props but there is also a slot to define it.
|
|
|
|
With props
|
|
|
|
.. code-block:: xml
|
|
|
|
<Popover target="'.popover-target'">
|
|
Content
|
|
</Popover>
|
|
|
|
With slot
|
|
|
|
.. code-block:: 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.
|
|
|
|
.. code-block:: 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.
|