88 lines
2.7 KiB
ReStructuredText
88 lines
2.7 KiB
ReStructuredText
|
|
Dialog
|
|
======
|
|
|
|
Overview
|
|
--------
|
|
|
|
The Dialog component is one of the main bricks of the web client.
|
|
|
|
Here are its props
|
|
|
|
.. list-table::
|
|
:header-rows: 1
|
|
|
|
* - Name
|
|
- Type
|
|
- Default
|
|
- Description
|
|
* - ``contentClass``
|
|
- string
|
|
-
|
|
- the classes contained in ``contentClass`` are added on the element "div.modal-content"
|
|
* - ``fullscreen``
|
|
- boolean
|
|
- false
|
|
- a class ``o_modal_full`` is added on the element "div.modal"
|
|
* - ``renderFooter``
|
|
- boolean
|
|
- true
|
|
- the footer contains a slot ``buttons`` and a default button ``OK``
|
|
* - ``renderHeader``
|
|
- boolean
|
|
- true
|
|
- the header contains a title and a button ``x`` for "closing" dialog
|
|
* - ``size``
|
|
- string
|
|
- "modal-lg"
|
|
- used to set the dialog size (available suffix: "xl", "lg", "md", sm")
|
|
* - ``title``
|
|
- string
|
|
- "Odoo"
|
|
-
|
|
* - ``technical``
|
|
- boolean
|
|
- true
|
|
- a class ``o_technical_modal`` is added on the element "div.modal". If set to false, the modal will have the standard frontend style (use this for non-editor frontend features).
|
|
|
|
|
|
Slots
|
|
-----
|
|
|
|
Beside the props, the configuration of a dialog is done via two slots:
|
|
|
|
The ``default`` slot should be used to define the main content of the dialog (display some text or subcomponents).
|
|
|
|
The slot ``buttons`` can be used to add custom buttons in the dialog footer.
|
|
If the footer is displayed and that slot is not used, a default button ``OK`` is added to the footer.
|
|
A click on that button triggers the event ``dialog-closed`` via the method ``_close`` (see section below).
|
|
|
|
So typically, the parent template could look like to
|
|
|
|
.. code-block:: xml
|
|
|
|
<div>
|
|
<!-- parent main content -->
|
|
<Dialog t-if="state.displayDialog" t-on-dialog-closed="_onDialogClosed">
|
|
<SubComponent t-on-subcomponent-clicked="_onSubcomponentClicked" />
|
|
<t t-set="buttons">
|
|
<button t-on-click="onConfirmClick">Confirm</button>
|
|
<button t-on-click="onDiscardClick">Discard</button>
|
|
</t>
|
|
</Dialog>
|
|
<!-- ... -->
|
|
</div>
|
|
|
|
Communication with parent
|
|
-------------------------
|
|
|
|
The dialog never closes itself. The dialog parent is responsible of opening/closing the dialog.
|
|
When the user click on the button ``x`` (in the header) or ``Ok`` (default button in the footer),
|
|
a custom event ``dialog-closed`` is triggered, allowing the parent to take action or not.
|
|
|
|
Location in the dom
|
|
-------------------
|
|
|
|
The Dialog class uses a portal to locate itself in a div with class ``o_dialog_container`` but the
|
|
communication with the parent goes as usual: via props or custom/dom events.
|