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

docs(SelectMenu): improve width of selects

Browse Source
This commit is contained in:
Benjamin Canac
2023-07-19 17:23:36 +02:00
parent b7d9c08a1c
commit b0486140e2
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -17,7 +17,7 @@ Like the Select component, you can use the `options` prop to pass an array of st
::component-example ::component-example
#default #default
:select-menu-example-basic{class="max-w-[12rem] w-full"} :select-menu-example-basic{class="w-full lg:w-48"}
#code #code
```vue ```vue
@@ -39,7 +39,7 @@ You can use the `multiple` prop to select multiple values.
::component-example ::component-example
#default #default
:select-menu-example-multiple{class="max-w-[12rem] w-full"} :select-menu-example-multiple{class="w-full lg:w-48"}
#code #code
```vue ```vue
@@ -61,7 +61,7 @@ You can pass an array of objects to `options` and either compare on the whole ob
::component-example ::component-example
#default #default
:select-menu-example-objects{class="max-w-[12rem] w-full"} :select-menu-example-objects{class="w-full lg:w-48"}
#code #code
```vue ```vue
<script setup> <script setup>
@@ -115,7 +115,7 @@ Use the `selected-icon` prop to set a different icon or change it globally in `u
::component-card ::component-card
--- ---
baseProps: baseProps:
class: 'max-w-[12rem] w-full' class: 'w-full lg:w-48'
placeholder: 'Select a person' 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'] options: ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
props: props:
@@ -140,7 +140,7 @@ This will use Headless UI [Combobox](https://headlessui.com/vue/combobox) compon
::component-card ::component-card
--- ---
baseProps: baseProps:
class: 'max-w-[12rem] w-full' class: 'w-full lg:w-48'
placeholder: 'Select a person' 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'] options: ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
props: props:
@@ -157,7 +157,7 @@ Use the `debounce` prop to adjust the delay of the function.
::component-example ::component-example
#default #default
:select-menu-example-async-search{class="max-w-[12rem] w-full"} :select-menu-example-async-search{class="w-full lg:w-48"}
#code #code
```vue ```vue
@@ -191,7 +191,7 @@ You can override the `#label` slot and handle the display yourself.
::component-example ::component-example
#default #default
:select-menu-example-multiple-slot{class="max-w-[12rem] w-full"} :select-menu-example-multiple-slot{class="w-full lg:w-48"}
#code #code
```vue ```vue
@@ -218,7 +218,7 @@ You can also override the `#default` slot entirely.
::component-example ::component-example
#default #default
:select-menu-example-button{class="max-w-[12rem] w-full"} :select-menu-example-button{class="w-full lg:w-48"}
#code #code
```vue ```vue