mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 12:14:41 +01:00
docs(input-menu/select-menu/select): add example with full item width (#4419)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
@@ -757,6 +757,33 @@ name: 'input-menu-filter-fields-example'
|
||||
---
|
||||
::
|
||||
|
||||
### With full content width
|
||||
|
||||
You can expand the content to the full width of its items by using the `ui.content` key.
|
||||
|
||||
::component-example
|
||||
---
|
||||
name: 'input-menu-content-width-example'
|
||||
collapse: true
|
||||
---
|
||||
::
|
||||
|
||||
::tip
|
||||
You can also change the content width globally in your `app.config.ts`:
|
||||
|
||||
```
|
||||
export default defineAppConfig({
|
||||
ui: {
|
||||
inputMenu: {
|
||||
slots: {
|
||||
content: 'min-w-fit'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
::
|
||||
|
||||
### As a CountryPicker
|
||||
|
||||
This example demonstrates using the InputMenu as a country picker with lazy loading - countries are only fetched when the menu is opened.
|
||||
|
||||
@@ -790,6 +790,33 @@ name: 'select-menu-filter-fields-example'
|
||||
---
|
||||
::
|
||||
|
||||
### With full content width
|
||||
|
||||
You can expand the content to the full width of its items by using the `ui.content` key.
|
||||
|
||||
::component-example
|
||||
---
|
||||
name: 'select-menu-content-width-example'
|
||||
collapse: true
|
||||
---
|
||||
::
|
||||
|
||||
::tip
|
||||
You can also change the content width globally in your `app.config.ts`:
|
||||
|
||||
```
|
||||
export default defineAppConfig({
|
||||
ui: {
|
||||
selectMenu: {
|
||||
slots: {
|
||||
content: 'min-w-fit'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
::
|
||||
|
||||
### As a CountryPicker
|
||||
|
||||
This example demonstrates using the SelectMenu as a country picker with lazy loading - countries are only fetched when the menu is opened.
|
||||
@@ -801,6 +828,8 @@ name: 'select-menu-countries-example'
|
||||
---
|
||||
::
|
||||
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
@@ -695,6 +695,33 @@ collapse: true
|
||||
---
|
||||
::
|
||||
|
||||
### With full content width
|
||||
|
||||
You can expand the content to the full width of its items by using the `ui.content` key.
|
||||
|
||||
::component-example
|
||||
---
|
||||
name: 'select-content-width-example'
|
||||
collapse: true
|
||||
---
|
||||
::
|
||||
|
||||
::tip
|
||||
You can also change the content width globally in your `app.config.ts`:
|
||||
|
||||
```
|
||||
export default defineAppConfig({
|
||||
ui: {
|
||||
select: {
|
||||
slots: {
|
||||
content: 'min-w-fit'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
::
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
Reference in New Issue
Block a user