mirror of
https://github.com/odoo/documentation.git
synced 2026-01-02 09:49:17 +07:00
[IMP] web: add documentation for Core components
This commit adds some documentation for features recently added to SelectMenu and TagsList components in master. A screenshot has been provided to the advances use case of the SelectMenu, with a customization of the bottom area of the dropdown, to create display a button allowing the creation of items
This commit is contained in:
@@ -1019,6 +1019,31 @@ The shape of a `group` is the following:
|
||||
:alt: Example of SelectMenu used with multiple selection
|
||||
:align: center
|
||||
|
||||
For more advanced use cases, you can customize the bottom area of the dropdown, using the `bottomArea` slot. Here, we choose to display
|
||||
a button with the corresponding value set in the search input.
|
||||
|
||||
.. code-block:: javascript
|
||||
|
||||
MyComponent.template = owl.tags.xml`
|
||||
<SelectMenu
|
||||
choices="choices"
|
||||
>
|
||||
<span class="select_menu_test">Select something</span>
|
||||
<t t-set-slot="bottomArea" t-slot-scope="select">
|
||||
<div t-if="select.data.searchValue">
|
||||
<button class="btn text-primary" t-on-click="() => this.onCreate(select.data.searchValue)">
|
||||
Create this article "<i t-esc="select.data.searchValue" />"
|
||||
</button>
|
||||
</div>
|
||||
</t>
|
||||
</SelectMenu>
|
||||
`;
|
||||
|
||||
.. image:: owl_components/select_menu_bottomArea.png
|
||||
:width: 400 px
|
||||
:alt: Example of SelectMenu's bottom area customization
|
||||
:align: center
|
||||
|
||||
.. _frontend/tags_list:
|
||||
|
||||
TagsList
|
||||
@@ -1063,6 +1088,7 @@ The shape of a `tag` is the following:
|
||||
|
||||
- `colorIndex` is an optional color id.
|
||||
- `id` is a unique identifier for the tag.
|
||||
- `icon` is an optional icon displayed just before the displayed text.
|
||||
- `img` is an optional image displayed in a circle, just before the displayed text.
|
||||
- `onClick` is an optional callback that can be given to the element. This allows the parent element to handle any functionality depending on the tag clicked.
|
||||
- `onDelete` is an optional callback that can be given to the element. This makes the removal of the item from the list of tags possible, and must be handled by the parent element.
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Reference in New Issue
Block a user