arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-25 09:20:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs: consistent usage of :component-example

Browse Source
This commit is contained in:
Benjamin Canac
2023-11-10 11:24:49 +01:00
parent 68f6956d6e
commit 0eb8d8f7ec
13 changed files with 183 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
docs/content/3.forms/4.select-menu.md
View File

@@ -16,23 +16,47 @@ The `SelectMenu` component renders by default a [Select](/forms/select) componen
Like the `Select` component, you can use the `options` prop to pass an array of strings or objects.
:component-example{component="select-menu-example-basic" :componentProps='{"class": "w-full lg:w-40"}'}
::component-example
---
component: 'select-menu-example-basic'
componentProps:
class: 'w-full lg:w-40'
---
::
### Multiple
You can use the `multiple` prop to select multiple values.
:component-example{component="select-menu-example-multiple" :componentProps='{"class": "w-full lg:w-40"}'}
::component-example
---
component: 'select-menu-example-multiple'
componentProps:
class: 'w-full lg:w-40'
---
::
### Objects
You can pass an array of objects to `options` and either compare on the whole object or use the `by` prop to compare on a specific key. You can configure which field will be used to display the label through the `option-attribute` prop that defaults to `label`.
:component-example{component="select-menu-example-objects" :componentProps='{"class": "w-full lg:w-40"}'}
::component-example
---
component: 'select-menu-example-objects'
componentProps:
class: 'w-full lg:w-40'
---
::
If you only want to select a single object property rather than the whole object as value, you can set the `value-attribute` property. This prop defaults to `null`.
:component-example{component="select-menu-example-objects-value-attribute" :componentProps='{"class": "w-full lg:w-40"}'}
::component-example
---
component: 'select-menu-example-objects-value-attribute'
componentProps:
class: 'w-full lg:w-40'
---
::
### Icon
@@ -81,7 +105,13 @@ Pass a function to the `searchable` prop to customize the search behavior and fi
Use the `debounce` prop to adjust the delay of the function.
:component-example{component="select-menu-example-async-search" :componentProps='{"class": "w-full lg:w-40"}'}
::component-example
---
component: 'select-menu-example-async-search'
componentProps:
class: 'w-full lg:w-40'
---
::
### Create option
@@ -89,7 +119,13 @@ Use the `creatable` prop to enable the creation of new options when the search d
Try to search for something that doesn't exist in the example below.
:component-example{component="select-menu-example-creatable" :componentProps='{"class": "w-full lg:w-40"}'}
::component-example
---
component: 'select-menu-example-creatable'
componentProps:
class: 'w-full lg:w-40'
---
::
## Popper
@@ -113,25 +149,49 @@ Use the `popper` prop to customize the popper instance.
You can override the `#label` slot and handle the display yourself.
:component-example{component="select-menu-example-multiple-slot" :componentProps='{"class": "w-full lg:w-40"}'}
::component-example
---
component: 'select-menu-example-multiple-slot'
componentProps:
class: 'w-full lg:w-40'
---
::
### `default`
You can also override the `#default` slot entirely.
:component-example{component="select-menu-example-button" :componentProps='{"class": "w-full lg:w-40"}'}
::component-example
---
component: 'select-menu-example-button'
componentProps:
class: 'w-full lg:w-40'
---
::
### `option`
Use the `#option` slot to customize the option content. You will have access to the `option`, `active` and `selected` properties in the slot scope.
:component-example{component="select-menu-example-option-slot" :componentProps='{"class": "w-full lg:w-40"}'}
::component-example
---
component: 'select-menu-example-option-slot'
componentProps:
class: 'w-full lg:w-40'
---
::
### `option-empty`
Use the `#option-empty` slot to customize the content displayed when the `searchable` prop is `true` and there is no options. You will have access to the `query` property in the slot scope.
:component-example{component="select-menu-example-option-empty-slot" :componentProps='{"class": "w-full lg:w-40"}'}
::component-example
---
component: 'select-menu-example-option-empty-slot'
componentProps:
class: 'w-full lg:w-40'
---
::
### `option-create`