mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-20 23:11:43 +01:00
docs(ComponentExample): automatically read code (#789)
This commit is contained in:
KeJun
GitHub
@@ -20,39 +20,7 @@ Pass an array to the `links` prop of the VerticalNavigation component. Each link
|
||||
|
||||
You can also pass any property from the [NuxtLink](https://nuxt.com/docs/api/components/nuxt-link#props) component such as `to`, `exact`, etc.
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:vertical-navigation-example
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const links = [{
|
||||
label: 'Profile',
|
||||
avatar: {
|
||||
src: 'https://avatars.githubusercontent.com/u/739984?v=4'
|
||||
},
|
||||
badge: 100
|
||||
}, {
|
||||
label: 'Installation',
|
||||
icon: 'i-heroicons-home',
|
||||
to: '/getting-started/installation'
|
||||
}, {
|
||||
label: 'Vertical Navigation',
|
||||
icon: 'i-heroicons-chart-bar',
|
||||
to: '/navigation/vertical-navigation'
|
||||
}, {
|
||||
label: 'Command Palette',
|
||||
icon: 'i-heroicons-command-line',
|
||||
to: '/navigation/command-palette'
|
||||
}]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UVerticalNavigation :links="links" />
|
||||
</template>
|
||||
```
|
||||
::
|
||||
:component-example{component="vertical-navigation-example"}
|
||||
|
||||
::callout{icon="i-heroicons-light-bulb"}
|
||||
Learn how to build a Tailwind like vertical navigation in the [Examples](/getting-started/examples#verticalnavigation) page.
|
||||
@@ -66,183 +34,25 @@ You can use slots to customize links display.
|
||||
|
||||
Use the `#default` slot to customize the link label. You will have access to the `link` and `isActive` properties in the slot scope.
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:vertical-navigation-example-default-slot
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const links = [{
|
||||
label: 'Navigation',
|
||||
children: [{
|
||||
label: 'Vertical Navigation',
|
||||
to: '/navigation/vertical-navigation'
|
||||
}, {
|
||||
label: 'Command Palette',
|
||||
to: '/navigation/command-palette'
|
||||
}]
|
||||
}, {
|
||||
label: 'Data',
|
||||
children: [{
|
||||
label: 'Table',
|
||||
to: '/data/table'
|
||||
}]
|
||||
}]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UVerticalNavigation :links="links">
|
||||
<template #default="{ link }">
|
||||
<div class="relative text-left w-full">
|
||||
<div class="mb-2">
|
||||
{{ link.label }}
|
||||
</div>
|
||||
<UVerticalNavigation v-if="link.children" :links="link.children" />
|
||||
</div>
|
||||
</template>
|
||||
</UVerticalNavigation>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
:component-example{component="vertical-navigation-example-default-slot"}
|
||||
|
||||
### `avatar`
|
||||
|
||||
Use the `#avatar` slot to customize the link avatar. You will have access to the `link` and `isActive` properties in the slot scope.
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:vertical-navigation-example-avatar-slot
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const links = [{
|
||||
avatar: {
|
||||
src: 'https://avatars.githubusercontent.com/u/739984?v=4'
|
||||
},
|
||||
label: 'Benjamin Canac',
|
||||
to: 'https://github.com/benjamincanac',
|
||||
target: '_blank'
|
||||
}, ...]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UVerticalNavigation :links="links">
|
||||
<template #avatar="{ link }">
|
||||
<UAvatar
|
||||
v-if="link.avatar"
|
||||
v-bind="link.avatar"
|
||||
size="3xs"
|
||||
/>
|
||||
<UIcon v-else name="i-heroicons-user-circle-20-solid" class="text-lg" />
|
||||
</template>
|
||||
</UVerticalNavigation>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
:component-example{component="vertical-navigation-example-avatar-slot"}
|
||||
|
||||
### `icon`
|
||||
|
||||
Use the `#icon` slot to customize the link icon. You will have access to the `link` and `isActive` properties in the slot scope.
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:vertical-navigation-example-icon-slot
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const types = {
|
||||
bug: {
|
||||
icon: 'i-heroicons-bug-ant-20-solid',
|
||||
color: 'text-red-500'
|
||||
},
|
||||
docs: {
|
||||
icon: 'i-heroicons-document-text-20-solid',
|
||||
color: 'text-blue-500'
|
||||
},
|
||||
lock: {
|
||||
icon: 'i-heroicons-lock-closed-20-solid',
|
||||
color: 'text-gray dark:text-white'
|
||||
},
|
||||
default: {
|
||||
icon: 'i-heroicons-question-mark-circle-20-solid',
|
||||
color: 'text-green-500'
|
||||
}
|
||||
}
|
||||
const links = [{
|
||||
label: 'UDropdown and UPopover dropdown menu, dropdown will be obscured',
|
||||
type: 'bug'
|
||||
}, {
|
||||
label: 'Uncaught (in promise) ReferenceError: ref is not defined',
|
||||
type: 'lock'
|
||||
}, {
|
||||
label: 'Fully styled and customizable components for Nuxt.',
|
||||
type: 'docs'
|
||||
}, {
|
||||
label: 'Can I pass a tailwind color to UNotifications with `toast.add()` ?'
|
||||
}]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UVerticalNavigation :links="links">
|
||||
<template #icon="{ link }">
|
||||
<UIcon v-if="link.type" :name="types[link.type].icon" :class="types[link.type].color" class="text-base" />
|
||||
<UIcon v-else :name="types.default.icon" :class="types.default.color" class="text-base" />
|
||||
</template>
|
||||
</UVerticalNavigation>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
:component-example{component="vertical-navigation-example-icon-slot"}
|
||||
|
||||
### `badge`
|
||||
|
||||
Use the `#badge` slot to customize the link badge. You will have access to the `link` and `isActive` properties in the slot scope.
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:vertical-navigation-example-badge-slot
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const links = [{
|
||||
label: '.github',
|
||||
icon: 'i-heroicons-folder-20-solid',
|
||||
badge: 'chore(github): use pnpm 8',
|
||||
time: 'last month'
|
||||
}, {
|
||||
label: '.editorconfig',
|
||||
icon: 'i-heroicons-document-solid',
|
||||
badge: 'Initial commit',
|
||||
time: '2 years ago'
|
||||
}, {
|
||||
label: '.package.json',
|
||||
icon: 'i-heroicons-document-solid',
|
||||
badge: 'chore(deps): bump',
|
||||
time: '16 hours ago'
|
||||
}]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UVerticalNavigation
|
||||
:links="links"
|
||||
class="w-full"
|
||||
:ui="{
|
||||
label: 'truncate relative text-gray-900 dark:text-white flex-initial w-32 text-left'
|
||||
}"
|
||||
>
|
||||
<template #badge="{ link }">
|
||||
<div class="flex-1 flex justify-between relative truncate">
|
||||
<div>{{ link.badge }}</div>
|
||||
<div>{{ link.time }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</UVerticalNavigation>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
:component-example{component="vertical-navigation-example-badge-slot"}
|
||||
|
||||
## Props
|
||||
|
||||
|
||||
@@ -17,85 +17,15 @@ Use a `v-model` to display a searchable and selectable list of commands.
|
||||
::component-example
|
||||
---
|
||||
padding: false
|
||||
component: 'command-palette-example-basic'
|
||||
componentProps:
|
||||
class: 'h-[257px]'
|
||||
---
|
||||
|
||||
#default
|
||||
:command-palette-example-basic{class="h-[257px]"}
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const people = [
|
||||
{ id: 1, label: 'Wade Cooper' },
|
||||
{ id: 2, label: 'Arlene Mccoy' },
|
||||
{ id: 3, label: 'Devon Webb' },
|
||||
{ id: 4, label: 'Tom Cook' },
|
||||
{ id: 5, label: 'Tanya Fox' },
|
||||
{ id: 6, label: 'Hellen Schmidt' },
|
||||
{ id: 7, label: 'Caroline Schultz' },
|
||||
{ id: 8, label: 'Mason Heaney' },
|
||||
{ id: 9, label: 'Claudie Smitham' },
|
||||
{ id: 10, label: 'Emil Schaefer' }
|
||||
]
|
||||
|
||||
const selected = ref([people[3]])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UCommandPalette
|
||||
v-model="selected"
|
||||
multiple
|
||||
nullable
|
||||
:groups="[{ key: 'people', commands: people }]"
|
||||
:fuse="{ resultLimit: 6, fuseOptions: { threshold: 0.1 } }"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
You can put a `CommandPalette` anywhere you want but it's most commonly used inside of a modal.
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:command-palette-example-modal
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const isOpen = ref(false)
|
||||
|
||||
const people = [
|
||||
{ id: 1, label: 'Wade Cooper' },
|
||||
{ id: 2, label: 'Arlene Mccoy' },
|
||||
{ id: 3, label: 'Devon Webb' },
|
||||
{ id: 4, label: 'Tom Cook' },
|
||||
{ id: 5, label: 'Tanya Fox' },
|
||||
{ id: 6, label: 'Hellen Schmidt' },
|
||||
{ id: 7, label: 'Caroline Schultz' },
|
||||
{ id: 8, label: 'Mason Heaney' },
|
||||
{ id: 9, label: 'Claudie Smitham' },
|
||||
{ id: 10, label: 'Emil Schaefer' }
|
||||
]
|
||||
|
||||
const selected = ref([])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<UButton label="Open" @click="isOpen = true" />
|
||||
|
||||
<UModal v-model="isOpen">
|
||||
<UCommandPalette
|
||||
v-model="selected"
|
||||
multiple
|
||||
nullable
|
||||
:groups="[{ key: 'people', commands: people }]"
|
||||
/>
|
||||
</UModal>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
:component-example{component="command-palette-example-modal"}
|
||||
|
||||
You can pass multiple groups of commands to the component. Each group will be separated by a divider and will display a label.
|
||||
|
||||
@@ -104,60 +34,10 @@ Without a `v-model`, you can also listen on `@update:model-value` to navigate to
|
||||
::component-example
|
||||
---
|
||||
padding: false
|
||||
component: 'command-palette-example-groups'
|
||||
componentProps:
|
||||
class: 'h-[274px]'
|
||||
---
|
||||
|
||||
#default
|
||||
:command-palette-example-groups{class="h-[274px]"}
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const router = useRouter()
|
||||
const toast = useToast()
|
||||
|
||||
const commandPaletteRef = ref()
|
||||
|
||||
const users = [
|
||||
{ id: 'benjamincanac', label: 'benjamincanac', href: 'https://github.com/benjamincanac', target: '_blank', avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' } },
|
||||
{ id: 'Atinux', label: 'Atinux', href: 'https://github.com/Atinux', target: '_blank', avatar: { src: 'https://avatars.githubusercontent.com/u/904724?v=4' } },
|
||||
{ id: 'smarroufin', label: 'smarroufin', href: 'https://github.com/smarroufin', target: '_blank', avatar: { src: 'https://avatars.githubusercontent.com/u/7547335?v=4' } }
|
||||
]
|
||||
|
||||
const actions = [
|
||||
{ id: 'new-file', label: 'Add new file', icon: 'i-heroicons-document-plus', click: () => toast.add({ title: 'New file added!' }), shortcuts: ['⌘', 'N'] },
|
||||
{ id: 'new-folder', label: 'Add new folder', icon: 'i-heroicons-folder-plus', click: () => toast.add({ title: 'New folder added!' }), shortcuts: ['⌘', 'F'] },
|
||||
{ id: 'hashtag', label: 'Add hashtag', icon: 'i-heroicons-hashtag', click: () => toast.add({ title: 'Hashtag added!' }), shortcuts: ['⌘', 'H'] },
|
||||
{ id: 'label', label: 'Add label', icon: 'i-heroicons-tag', click: () => toast.add({ title: 'Label added!' }), shortcuts: ['⌘', 'L'] }
|
||||
]
|
||||
|
||||
const groups = computed(() =>
|
||||
[commandPaletteRef.value?.query ? {
|
||||
key: 'users',
|
||||
commands: users
|
||||
} : {
|
||||
key: 'recent',
|
||||
label: 'Recent searches',
|
||||
commands: users.slice(0, 1)
|
||||
}, {
|
||||
key: 'actions',
|
||||
commands: actions
|
||||
}].filter(Boolean))
|
||||
|
||||
function onSelect (option) {
|
||||
if (option.click) {
|
||||
option.click()
|
||||
} else if (option.to) {
|
||||
router.push(option.to)
|
||||
} else if (option.href) {
|
||||
window.open(option.href, '_blank')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UCommandPalette ref="commandPaletteRef" :groups="groups" @update:model-value="onSelect" />
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
### Icon
|
||||
@@ -293,34 +173,10 @@ You can also pass an `async` function to the `search` property of a group to per
|
||||
::component-example
|
||||
---
|
||||
padding: false
|
||||
component: 'command-palette-example-async'
|
||||
componentProps:
|
||||
class: 'h-[274px]'
|
||||
---
|
||||
|
||||
#default
|
||||
:command-palette-example-async{class="h-[274px]"}
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const groups = computed(() => {
|
||||
return [{
|
||||
key: 'users',
|
||||
label: q => q && `Users matching “${q}”...`,
|
||||
search: async (q) => {
|
||||
if (!q) {
|
||||
return []
|
||||
}
|
||||
|
||||
const users = await $fetch(`https://jsonplaceholder.typicode.com/users`, { params: { q } })
|
||||
|
||||
return users.map(user => ({ id: user.id, label: user.name, suffix: user.email }))
|
||||
}
|
||||
}].filter(Boolean)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UCommandPalette :groups="groups" />
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
::callout{icon="i-heroicons-light-bulb"}
|
||||
@@ -353,32 +209,14 @@ The 4 slots above will have access to the `group`, `command`, `active` and `sele
|
||||
|
||||
Use the `#empty-state` slot to customize the empty state.
|
||||
|
||||
::component-example{class="grid"}
|
||||
::component-example
|
||||
---
|
||||
padding: false
|
||||
overflowClass: 'overflow-x-auto'
|
||||
component: 'command-palette-example-empty-slot'
|
||||
componentProps:
|
||||
class: 'flex-1'
|
||||
---
|
||||
|
||||
#default
|
||||
:command-palette-example-empty-slot{class="flex-1"}
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const groups = [...]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UCommandPalette :groups="groups">
|
||||
<template #empty-state>
|
||||
<div class="flex flex-col items-center justify-center py-6 gap-3">
|
||||
<span class="italic text-sm">Nothing here!</span>
|
||||
<UButton label="Add item" />
|
||||
</div>
|
||||
</template>
|
||||
</UCommandPalette>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
@@ -10,22 +10,7 @@ links:
|
||||
|
||||
Use a `v-model` to get a reactive page alongside a `total` which represents the total of items. You can also use the `page-count` prop to define the number of items per page which defaults to `10`.
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:pagination-example-basic
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const page = ref(1)
|
||||
const items = ref(Array(55))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UPagination v-model="page" :page-count="5" :total="items.length" />
|
||||
</template>
|
||||
```
|
||||
::
|
||||
:component-example{component="pagination-example-basic"}
|
||||
|
||||
### Max
|
||||
|
||||
@@ -110,34 +95,7 @@ excludedProps:
|
||||
|
||||
Use the `#prev` and `#next` slots to set the content of the previous and next buttons.
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:pagination-example-prev-next-slots
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const page = ref(1);
|
||||
const items = ref(Array(55));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UPagination v-model="page" :total="items.length" :ui="{ rounded: 'first-of-type:rounded-s-md last-of-type:rounded-e-md' }">
|
||||
<template #prev="{ onClick }">
|
||||
<UTooltip text="Previous page">
|
||||
<UButton icon="i-heroicons-arrow-small-left-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="rtl:[&_span:first-child]:rotate-180 me-2" @click="onClick" />
|
||||
</UTooltip>
|
||||
</template>
|
||||
|
||||
<template #next="{ onClick }">
|
||||
<UTooltip text="Next page">
|
||||
<UButton icon="i-heroicons-arrow-small-right-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="rtl:[&_span:last-child]:rotate-180 ms-2" @click="onClick" />
|
||||
</UTooltip>
|
||||
</template>
|
||||
</UPagination>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
:component-example{component="pagination-example-prev-next-slots"}
|
||||
|
||||
## Props
|
||||
|
||||
|
||||
@@ -15,71 +15,19 @@ Pass an array to the `items` prop of the Tabs component. Each item can have the
|
||||
- `content` - The content to display in the panel by default.
|
||||
- `disabled` - Determines whether the item is disabled or not.
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:tabs-example-basic{class="w-full"}
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const items = [{
|
||||
label: 'Tab1',
|
||||
content: 'This is the content shown for Tab1'
|
||||
}, {
|
||||
label: 'Tab2',
|
||||
disabled: true,
|
||||
content: 'And, this is the content for Tab2'
|
||||
}, {
|
||||
label: 'Tab3',
|
||||
content: 'Finally, this is the content for Tab3'
|
||||
}]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UTabs :items="items" />
|
||||
</template>
|
||||
```
|
||||
::
|
||||
:component-example{component="tabs-example-basic" :componentProps='{"class": "w-full"}'}
|
||||
|
||||
### Vertical
|
||||
|
||||
You can change the orientation of the tabs by setting the `orientation` prop to `vertical`.
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:tabs-example-vertical{class="w-full"}
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const items = [...]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UTabs :items="items" orientation="vertical" :ui="{ wrapper: 'flex items-center gap-4', list: { width: 'w-48' } }" />
|
||||
</template>
|
||||
```
|
||||
::
|
||||
:component-example{component="tabs-example-vertical" :componentProps='{"class": "w-full"}'}
|
||||
|
||||
### Default index
|
||||
|
||||
You can set the default index of the tabs by setting the `default-index` prop.
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:tabs-example-index{class="w-full"}
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const items = [...]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UTabs :items="items" :default-index="2" />
|
||||
</template>
|
||||
```
|
||||
::
|
||||
:component-example{component="tabs-example-index" :componentProps='{"class": "w-full"}'}
|
||||
|
||||
::callout{icon="i-heroicons-exclamation-triangle"}
|
||||
This will have no effect if you are using a `v-model` to control the selected index.
|
||||
@@ -89,65 +37,13 @@ const items = [...]
|
||||
|
||||
You can listen to changes by using the `@change` event. The event will emit the index of the selected item.
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:tabs-example-change{class="w-full"}
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const items = [...]
|
||||
|
||||
function onChange (index) {
|
||||
const item = items[index]
|
||||
|
||||
alert(`${item.label} was clicked!`)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UTabs :items="items" @change="onChange" />
|
||||
</template>
|
||||
```
|
||||
::
|
||||
:component-example{component="tabs-example-change" :componentProps='{"class": "w-full"}'}
|
||||
|
||||
### Control the selected index
|
||||
|
||||
Use a `v-model` to control the selected index.
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:tabs-example-v-model{class="w-full"}
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const items = [...]
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const selected = computed({
|
||||
get () {
|
||||
const index = items.findIndex((item) => item.label === route.query.tab)
|
||||
if (index === -1) {
|
||||
return 0
|
||||
}
|
||||
|
||||
return index
|
||||
},
|
||||
set (value) {
|
||||
// Hash is specified here to prevent the page from scrolling to the top
|
||||
router.replace({ query: { tab: items[value].label }, hash: '#control-the-selected-index' })
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UTabs v-model="selected" :items="items" />
|
||||
</template>
|
||||
```
|
||||
::
|
||||
:component-example{component="tabs-example-v-model" :componentProps='{"class": "w-full"}'}
|
||||
|
||||
::callout{icon="i-heroicons-information-circle"}
|
||||
In this example, we are binding tabs to the route query. Refresh the page to see the selected tab change.
|
||||
@@ -161,201 +57,17 @@ You can use slots to customize the buttons and items content of the Accordion.
|
||||
|
||||
Use the `#default` slot to customize the content of the trigger buttons. You will have access to the `item`, `index`, `selected` and `disabled` in the slot scope.
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:tabs-example-default-slot
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const items = [{
|
||||
label: 'Introduction',
|
||||
icon: 'i-heroicons-information-circle',
|
||||
content: 'This is the content shown for Tab1'
|
||||
}, {
|
||||
label: 'Installation',
|
||||
icon: 'i-heroicons-arrow-down-tray',
|
||||
content: 'And, this is the content for Tab2'
|
||||
}, {
|
||||
label: 'Theming',
|
||||
icon: 'i-heroicons-eye-dropper',
|
||||
content: 'Finally, this is the content for Tab3'
|
||||
}]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UTabs :items="items" class="w-full">
|
||||
<template #default="{ item, index, selected }">
|
||||
<div class="flex items-center gap-2 relative truncate">
|
||||
<UIcon :name="item.icon" class="w-4 h-4 flex-shrink-0" />
|
||||
|
||||
<span class="truncate">{{ index + 1 }}. {{ item.label }}</span>
|
||||
|
||||
<span v-if="selected" class="absolute -right-4 w-2 h-2 rounded-full bg-primary-500 dark:bg-primary-400" />
|
||||
</div>
|
||||
</template>
|
||||
</UTabs>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
:component-example{component="tabs-example-default-slot"}
|
||||
|
||||
### `item`
|
||||
|
||||
Use the `#item` slot to customize the items content. You will have access to the `item`, `index` and `selected` properties in the slot scope.
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:tabs-example-item-slot
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const items = [{
|
||||
key: 'account',
|
||||
label: 'Account',
|
||||
description: 'Make changes to your account here. Click save when you\'re done.'
|
||||
}, {
|
||||
key: 'password',
|
||||
label: 'Password',
|
||||
description: 'Change your password here. After saving, you\'ll be logged out.'
|
||||
}]
|
||||
|
||||
const accountForm = reactive({ name: 'Benjamin', username: 'benjamincanac' })
|
||||
const passwordForm = reactive({ currentPassword: '', newPassword: '' })
|
||||
|
||||
function onSubmit (form) {
|
||||
console.log('Submitted form:', form)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UTabs :items="items" class="w-full">
|
||||
<template #item="{ item }">
|
||||
<UCard @submit.prevent="() => onSubmit(item.key === 'account' ? accountForm : passwordForm)">
|
||||
<template #header>
|
||||
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
|
||||
{{ item.label }}
|
||||
</h3>
|
||||
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
||||
{{ item.description }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<div v-if="item.key === 'account'" class="space-y-3">
|
||||
<UFormGroup label="Name" name="name">
|
||||
<UInput v-model="accountForm.name" />
|
||||
</UFormGroup>
|
||||
<UFormGroup label="Username" name="username">
|
||||
<UInput v-model="accountForm.username" />
|
||||
</UFormGroup>
|
||||
</div>
|
||||
<div v-else-if="item.key === 'password'" class="space-y-3">
|
||||
<UFormGroup label="Current Password" name="current" required>
|
||||
<UInput v-model="passwordForm.currentPassword" type="password" required />
|
||||
</UFormGroup>
|
||||
<UFormGroup label="New Password" name="new" required>
|
||||
<UInput v-model="passwordForm.newPassword" type="password" required />
|
||||
</UFormGroup>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<UButton type="submit" color="black">
|
||||
Save {{ item.key === 'account' ? 'account' : 'password' }}
|
||||
</UButton>
|
||||
</template>
|
||||
</UCard>
|
||||
</template>
|
||||
</UTabs>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
:component-example{component="tabs-example-item-slot"}
|
||||
|
||||
You can also pass a `slot` property to customize a specific item.
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:tabs-example-item-custom-slot
|
||||
|
||||
#code
|
||||
```vue
|
||||
<script setup>
|
||||
const items = [{
|
||||
slot: 'account',
|
||||
label: 'Account'
|
||||
}, {
|
||||
slot: 'password',
|
||||
label: 'Password'
|
||||
}]
|
||||
|
||||
const accountForm = reactive({ name: 'Benjamin', username: 'benjamincanac' })
|
||||
const passwordForm = reactive({ currentPassword: '', newPassword: '' })
|
||||
|
||||
function onSubmitAccount () {
|
||||
console.log('Submitted form:', accountForm)
|
||||
}
|
||||
|
||||
function onSubmitPassword () {
|
||||
console.log('Submitted form:', passwordForm)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UTabs :items="items" class="w-full">
|
||||
<template #account="{ item }">
|
||||
<UCard @submit.prevent="onSubmitAccount">
|
||||
<template #header>
|
||||
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
|
||||
{{ item.label }}
|
||||
</h3>
|
||||
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
||||
Make changes to your account here. Click save when you're done.
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<UFormGroup label="Name" name="name" class="mb-3">
|
||||
<UInput v-model="accountForm.name" />
|
||||
</UFormGroup>
|
||||
<UFormGroup label="Username" name="username">
|
||||
<UInput v-model="accountForm.username" />
|
||||
</UFormGroup>
|
||||
|
||||
<template #footer>
|
||||
<UButton type="submit" color="black">
|
||||
Save account
|
||||
</UButton>
|
||||
</template>
|
||||
</UCard>
|
||||
</template>
|
||||
|
||||
<template #password="{ item }">
|
||||
<UCard @submit.prevent="onSubmitPassword">
|
||||
<template #header>
|
||||
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
|
||||
{{ item.label }}
|
||||
</h3>
|
||||
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
||||
Change your password here. After saving, you'll be logged out.
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<UFormGroup label="Current Password" name="current" required class="mb-3">
|
||||
<UInput v-model="passwordForm.currentPassword" type="password" required />
|
||||
</UFormGroup>
|
||||
<UFormGroup label="New Password" name="new" required>
|
||||
<UInput v-model="passwordForm.newPassword" type="password" required />
|
||||
</UFormGroup>
|
||||
|
||||
<template #footer>
|
||||
<UButton type="submit" color="black">
|
||||
Save password
|
||||
</UButton>
|
||||
</template>
|
||||
</UCard>
|
||||
</template>
|
||||
</UTabs>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
:component-example{component="tabs-example-item-custom-slot"}
|
||||
|
||||
## Props
|
||||
|
||||
|
||||
Reference in New Issue
Block a user