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

docs: lots of improvements

Browse Source
This commit is contained in:
Benjamin Canac
2023-05-13 23:22:07 +02:00
parent 0c2a5d98cf
commit 37f1a1b5ad
18 changed files with 605 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,6 +7,10 @@ headlessui:
## Usage
The SelectMenu component renders by default a [Select](/forms/select) component and is based on the `ui.select` preset. You can use most of the Select props to configure the display if you don't want to override the default slot such as [size](/forms/select#size), [placeholder](/forms/select#placeholder), [appearance](/forms/select#appearance), [icon](/forms/select#icon), [disabled](/forms/select#disabled), etc.
Like the Select component, you can use the `options` prop to pass an array of strings or objects.
::component-example
#default
:select-menu-example-basic{class="max-w-[12rem] w-full"}
@@ -25,7 +29,7 @@ const selected = ref(people[0])
```
::
You can use multiple values but you have to override the `#label` slot and handle the display yourself.
You can use the `multiple` prop to select multiple values but you have to override the `#label` slot and handle the display yourself.
::component-example
#default
@@ -76,7 +80,7 @@ const selected = ref(people[3])
```
::
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 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 `optionAttribute` prop that defaults to `label`.
::component-example
#default
@@ -131,6 +135,10 @@ const selected = ref(people[0])
Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}`.
Use the `trailingIcon` prop to set a different icon or change it globally in `ui.select.default.trailingIcon`. Defaults to `i-heroicons-chevron-down-20-solid`.
Use the `selectedIcon` prop to set a different icon or change it globally in `ui.selectMenu.default.selectedIcon`. Defaults to `i-heroicons-check-20-solid`.
::component-card
---
baseProps:
@@ -161,21 +169,6 @@ props:
---
::
### Disabled
Use the `disabled` prop to disable the SelectMenu.
::component-card
---
baseProps:
class: 'max-w-[12rem] w-full'
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:
disabled: true
---
::
## Props
:component-props