Compare commits

...

1 Commits

Author SHA1 Message Date
luvi
2a34b1cd61 [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
2023-04-06 12:38:13 +02:00
2 changed files with 26 additions and 0 deletions

View File

@@ -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