diff --git a/content/developer/reference/frontend/owl_components.rst b/content/developer/reference/frontend/owl_components.rst index d645658c1..bb7b56f51 100644 --- a/content/developer/reference/frontend/owl_components.rst +++ b/content/developer/reference/frontend/owl_components.rst @@ -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` + + Select something + +
+ +
+
+
+ `; + + .. 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. diff --git a/content/developer/reference/frontend/owl_components/select_menu_bottomArea.png b/content/developer/reference/frontend/owl_components/select_menu_bottomArea.png new file mode 100644 index 000000000..09bed513d Binary files /dev/null and b/content/developer/reference/frontend/owl_components/select_menu_bottomArea.png differ