mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-23 08:20:39 +01:00
docs(SelectMenu): improve
This commit is contained in:
Benjamin Canac
@@ -22,7 +22,7 @@ Like the `Select` component, you can use the `options` prop to pass an array of
|
||||
---
|
||||
component: 'select-menu-example-basic'
|
||||
componentProps:
|
||||
class: 'w-full lg:w-40'
|
||||
class: 'w-full lg:w-48'
|
||||
---
|
||||
::
|
||||
|
||||
@@ -34,7 +34,7 @@ You can use the `multiple` prop to select multiple values.
|
||||
---
|
||||
component: 'select-menu-example-multiple'
|
||||
componentProps:
|
||||
class: 'w-full lg:w-40'
|
||||
class: 'w-full lg:w-48'
|
||||
---
|
||||
::
|
||||
|
||||
@@ -46,7 +46,7 @@ You can pass an array of objects to `options` and either compare on the whole ob
|
||||
---
|
||||
component: 'select-menu-example-objects'
|
||||
componentProps:
|
||||
class: 'w-full lg:w-40'
|
||||
class: 'w-full lg:w-48'
|
||||
---
|
||||
::
|
||||
|
||||
@@ -56,7 +56,7 @@ If you only want to select a single object property rather than the whole object
|
||||
---
|
||||
component: 'select-menu-example-objects-value-attribute'
|
||||
componentProps:
|
||||
class: 'w-full lg:w-40'
|
||||
class: 'w-full lg:w-48'
|
||||
---
|
||||
::
|
||||
|
||||
@@ -67,7 +67,7 @@ Use the `selected-icon` prop to set a different icon or change it globally in `u
|
||||
::component-card
|
||||
---
|
||||
baseProps:
|
||||
class: 'w-full lg:w-40'
|
||||
class: 'w-full lg:w-48'
|
||||
placeholder: 'Select a person'
|
||||
options: ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
|
||||
props:
|
||||
@@ -81,7 +81,7 @@ excludedProps:
|
||||
Learn how to customize icons from the [Select](/forms/select#icon) component.
|
||||
::
|
||||
|
||||
### Search
|
||||
## Searchable
|
||||
|
||||
Use the `searchable` prop to enable search.
|
||||
|
||||
@@ -92,7 +92,7 @@ This will use Headless UI [Combobox](https://headlessui.com/vue/combobox) compon
|
||||
::component-card
|
||||
---
|
||||
baseProps:
|
||||
class: 'w-full lg:w-40'
|
||||
class: 'w-full lg:w-48'
|
||||
placeholder: 'Select a person'
|
||||
options: ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
|
||||
props:
|
||||
@@ -101,28 +101,26 @@ props:
|
||||
---
|
||||
::
|
||||
|
||||
#### Search Attributes
|
||||
### Attributes
|
||||
|
||||
Use the `search-attributes` with an array of property names to search on each option object.
|
||||
|
||||
Nested attributes can be accessed using `dot.notation`. When the property value is an array or object, these are cast to string so these can be searched within.
|
||||
Use the `search-attributes` prop with an array of property names to search on each option object. Nested attributes can be accessed using `dot.notation`. When the property value is an array or object, these are cast to string so these can be searched within.
|
||||
|
||||
::component-example
|
||||
---
|
||||
component: 'select-menu-example-search-attributes'
|
||||
componentProps:
|
||||
class: 'w-full lg:w-96'
|
||||
class: 'w-full lg:w-48'
|
||||
---
|
||||
::
|
||||
|
||||
#### Clear on close
|
||||
### Clear on close
|
||||
|
||||
By default, the search query will be kept after the menu is closed. To clear it on close, set the `clear-search-on-close` prop.
|
||||
|
||||
::component-card
|
||||
---
|
||||
baseProps:
|
||||
class: 'w-full lg:w-40'
|
||||
class: 'w-full lg:w-48'
|
||||
placeholder: 'Select a person'
|
||||
searchable: true
|
||||
searchablePlaceholder: 'Search a person...'
|
||||
@@ -142,11 +140,11 @@ Use the `debounce` prop to adjust the delay of the function.
|
||||
---
|
||||
component: 'select-menu-example-async-search'
|
||||
componentProps:
|
||||
class: 'w-full lg:w-40'
|
||||
class: 'w-full lg:w-48'
|
||||
---
|
||||
::
|
||||
|
||||
### Create option
|
||||
## Creatable
|
||||
|
||||
Use the `creatable` prop to enable the creation of new options when the search doesn't return any results (only works with `searchable`).
|
||||
|
||||
@@ -156,7 +154,7 @@ Try to search for something that doesn't exist in the example below.
|
||||
---
|
||||
component: 'select-menu-example-creatable'
|
||||
componentProps:
|
||||
class: 'w-full lg:w-40'
|
||||
class: 'w-full lg:w-48'
|
||||
---
|
||||
::
|
||||
|
||||
@@ -186,7 +184,7 @@ You can override the `#label` slot and handle the display yourself.
|
||||
---
|
||||
component: 'select-menu-example-multiple-slot'
|
||||
componentProps:
|
||||
class: 'w-full lg:w-40'
|
||||
class: 'w-full lg:w-48'
|
||||
---
|
||||
::
|
||||
|
||||
@@ -198,7 +196,7 @@ You can also override the `#default` slot entirely.
|
||||
---
|
||||
component: 'select-menu-example-button'
|
||||
componentProps:
|
||||
class: 'w-full lg:w-40'
|
||||
class: 'w-full lg:w-48'
|
||||
---
|
||||
::
|
||||
|
||||
@@ -210,7 +208,7 @@ Use the `#option` slot to customize the option content. You will have access to
|
||||
---
|
||||
component: 'select-menu-example-option-slot'
|
||||
componentProps:
|
||||
class: 'w-full lg:w-40'
|
||||
class: 'w-full lg:w-48'
|
||||
---
|
||||
::
|
||||
|
||||
@@ -222,7 +220,7 @@ Use the `#option-empty` slot to customize the content displayed when the `search
|
||||
---
|
||||
component: 'select-menu-example-option-empty-slot'
|
||||
componentProps:
|
||||
class: 'w-full lg:w-40'
|
||||
class: 'w-full lg:w-48'
|
||||
---
|
||||
::
|
||||
|
||||
|
||||
Reference in New Issue
Block a user