mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-22 16:00:39 +01:00
docs: move slots sections as h2
This commit is contained in:
Benjamin Canac
@@ -54,59 +54,6 @@ const selected = ref([])
|
||||
```
|
||||
::
|
||||
|
||||
### Slots
|
||||
|
||||
You can override the `#label` slot and handle the display yourself.
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:select-menu-example-multiple-slot{class="max-w-[12rem] w-full"}
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const people = [...]
|
||||
|
||||
const selected = ref([])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<USelectMenu v-model="selected" :options="people" multiple>
|
||||
<template #label>
|
||||
<span v-if="selected.length" class="truncate">{{ selected.join(', ') }}</span>
|
||||
<span v-else>Select people</span>
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
You can also override the `#default` slot entirely.
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:select-menu-example-button{class="max-w-[12rem] w-full"}
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const people = [...]
|
||||
|
||||
const selected = ref(people[3])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<USelectMenu v-slot="{ open }" v-model="selected" :options="people">
|
||||
<UButton color="gray">
|
||||
{{ selected }}
|
||||
|
||||
<UIcon name="i-heroicons-chevron-right-20-solid" class="w-5 h-5 transition-transform" :class="[open && 'transform rotate-90']" />
|
||||
</UButton>
|
||||
</USelectMenu>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
### 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`.
|
||||
@@ -201,6 +148,63 @@ props:
|
||||
---
|
||||
::
|
||||
|
||||
## Slots
|
||||
|
||||
### `#label`
|
||||
|
||||
You can override the `#label` slot and handle the display yourself.
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:select-menu-example-multiple-slot{class="max-w-[12rem] w-full"}
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const people = [...]
|
||||
|
||||
const selected = ref([])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<USelectMenu v-model="selected" :options="people" multiple>
|
||||
<template #label>
|
||||
<span v-if="selected.length" class="truncate">{{ selected.join(', ') }}</span>
|
||||
<span v-else>Select people</span>
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
### `#default`
|
||||
|
||||
You can also override the `#default` slot entirely.
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:select-menu-example-button{class="max-w-[12rem] w-full"}
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const people = [...]
|
||||
|
||||
const selected = ref(people[3])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<USelectMenu v-slot="{ open }" v-model="selected" :options="people">
|
||||
<UButton color="gray">
|
||||
{{ selected }}
|
||||
|
||||
<UIcon name="i-heroicons-chevron-right-20-solid" class="w-5 h-5 transition-transform" :class="[open && 'transform rotate-90']" />
|
||||
</UButton>
|
||||
</USelectMenu>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
:component-props
|
||||
|
||||
@@ -365,11 +365,45 @@ const filteredRows = computed(() => {
|
||||
```
|
||||
::
|
||||
|
||||
### Slots
|
||||
### Empty
|
||||
|
||||
Use the `empty-state` prop to display a message when there are no results.
|
||||
|
||||
You can pass an `object` through the `empty-state` prop or globally through `ui.table.default.emptyState`.
|
||||
|
||||
You can also set it to `null` to hide the empty state.
|
||||
|
||||
::component-card
|
||||
---
|
||||
padding: false
|
||||
overflowClass: 'overflow-x-auto'
|
||||
baseProps:
|
||||
class: 'w-full'
|
||||
columns:
|
||||
- key: 'id'
|
||||
label: 'ID'
|
||||
- key: 'name'
|
||||
label: 'Name'
|
||||
- key: 'title'
|
||||
label: 'Title'
|
||||
- key: 'email'
|
||||
label: 'Email'
|
||||
- key: 'role'
|
||||
label: 'Role'
|
||||
props:
|
||||
emptyState:
|
||||
icon: 'i-heroicons-circle-stack-20-solid'
|
||||
label: "No items."
|
||||
excludedProps:
|
||||
- emptyState
|
||||
---
|
||||
::
|
||||
|
||||
## Slots
|
||||
|
||||
You can use slots to customize the header and data cells of the table.
|
||||
|
||||
#### Header
|
||||
### `#<column>-header`
|
||||
|
||||
Use the `#<column>-header` slot to customize the header cell of a column. You will have access to the `column`, `sort` and `on-sort` properties in the slot scope.
|
||||
|
||||
@@ -384,12 +418,10 @@ The `on-sort` property is a function that you can call to sort the table and acc
|
||||
Even though you can customize the sort button as mentioned in the [Sortable](#sortable) section, you can use this slot to completely override its behavior, with a custom dropdown for example.
|
||||
::
|
||||
|
||||
#### Data
|
||||
### `#<column>-data`
|
||||
|
||||
Use the `#<column>-data` slot to customize the data cell of a column. You will have access to the `row` and `column` properties in the slot scope.
|
||||
|
||||
#### Example
|
||||
|
||||
You can for example create an extra column for actions with a [Dropdown](/elements/dropdown) component inside or change the color of the rows based on a selection.
|
||||
|
||||
::component-example{class="grid"}
|
||||
@@ -449,40 +481,6 @@ const selected = ref([people[1]])
|
||||
```
|
||||
::
|
||||
|
||||
### Empty
|
||||
|
||||
Use the `empty-state` prop to display a message when there are no results.
|
||||
|
||||
You can pass an `object` through the `empty-state` prop or globally through `ui.table.default.emptyState`.
|
||||
|
||||
You can also set it to `null` to hide the empty state.
|
||||
|
||||
::component-card
|
||||
---
|
||||
padding: false
|
||||
overflowClass: 'overflow-x-auto'
|
||||
baseProps:
|
||||
class: 'w-full'
|
||||
columns:
|
||||
- key: 'id'
|
||||
label: 'ID'
|
||||
- key: 'name'
|
||||
label: 'Name'
|
||||
- key: 'title'
|
||||
label: 'Title'
|
||||
- key: 'email'
|
||||
label: 'Email'
|
||||
- key: 'role'
|
||||
label: 'Role'
|
||||
props:
|
||||
emptyState:
|
||||
icon: 'i-heroicons-circle-stack-20-solid'
|
||||
label: "No items."
|
||||
excludedProps:
|
||||
- emptyState
|
||||
---
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
:component-props
|
||||
|
||||
Reference in New Issue
Block a user