组件
面包屑导航
一系列链接，用于指示当前页面在导航层次结构中的位置。
使用
将数组传递给 Breadcrumb 组件的 links 属性。每个链接可以具有以下属性
label- 链接的标签。labelClass- 链接标签的类。icon- 链接的图标。iconClass- 链接图标的类。
您还可以传递来自 NuxtLink 组件的任何属性，例如 to、exact 等。
<script setup lang="ts">
const links = [{
label: 'Home',
icon: 'i-heroicons-home',
to: '/'
}, {
label: 'Navigation',
icon: 'i-heroicons-square-3-stack-3d'
}, {
label: 'Breadcrumb',
icon: 'i-heroicons-link'
}]
</script>
<template>
<UBreadcrumb :links="links" />
</template>
当
to 属性未定义时，将呈现一个 span 而不是链接。分隔符
使用 divider 属性来自定义每个链接之间的分隔符，它可以是 **图标或字符串**。您可以在 ui.breadcrumb.default.divider 中全局更改它。默认值为 i-heroicons-chevron-right-20-solid。
您可以将属性设置为 null 以隐藏分隔符。此外，您可以使用 divider 插槽来自定义它。
<template>
<UBreadcrumb
divider="/"
:links="[{ label: 'Home', to: '/' }, { label: 'Navigation' }, { label: 'Breadcrumb' }]"
/>
</template>
插槽
默认
使用 #default 插槽来自定义链接标签。您可以在插槽作用域中访问 link、index 和 isActive 属性。
<script setup lang="ts">
const links = [{
label: 'Home',
to: '/'
}, {
label: 'Navigation'
}, {
label: 'Breadcrumb'
}]
</script>
<template>
<UBreadcrumb :links="links">
<template #default="{ link, isActive, index }">
<UBadge :color="isActive ? 'primary' : 'gray'" class="rounded-full truncate">
{{ index + 1 }}. {{ link.label }}
</UBadge>
</template>
</UBreadcrumb>
</template>
图标
使用 #icon 插槽来自定义链接图标。您可以在插槽作用域中访问 link、index 和 isActive 属性。
<script setup lang="ts">
const links = [{
label: 'Home',
to: '/'
}, {
label: 'Navigation'
}, {
label: 'Breadcrumb'
}]
</script>
<template>
<UBreadcrumb :links="links" :divider="null" :ui="{ ol: 'gap-x-3' }">
<template #icon="{ link, index, isActive }">
<UAvatar
:alt="(index + 1).toString()"
:ui="{
background: isActive ? 'bg-primary-500 dark:bg-primary-400' : undefined,
placeholder: isActive ? 'text-white dark:text-gray-900' : !!link.to ? 'group-hover:text-gray-700 dark:group-hover:text-gray-200' : ''
}"
size="xs"
/>
</template>
</UBreadcrumb>
</template>
分隔符
使用 divider 插槽来自定义面包屑导航的分隔符。
<script setup lang="ts">
const links = [{
label: 'Home',
icon: 'i-heroicons-home',
to: '/'
}, {
label: 'Navigation',
icon: 'i-heroicons-square-3-stack-3d'
}, {
label: 'Breadcrumb',
icon: 'i-heroicons-link'
}]
</script>
<template>
<UBreadcrumb :links="links" :ui="{ ol: 'gap-x-3', li: 'gap-x-3' }">
<template #divider>
<span class="w-8 h-1 rounded-full bg-gray-300 dark:bg-gray-700" />
</template>
</UBreadcrumb>
</template>
属性
ui
{ wrapper?: string; ol?: string; li?: string; base?: string; label?: string; icon?: DeepPartial<{ base: string; active: string; inactive: string; }, any>; divider?: DeepPartial<{ base: string; }, any>; active?: string; inactive?: string; default?: DeepPartial<...>; } & { ...; } & { ...; }
{}分隔符
字符串
config.default.divider链接
BreadcrumbLink[]
[]配置
{
wrapper: 'relative min-w-0',
ol: 'flex items-center gap-x-1.5',
li: 'flex items-center gap-x-1.5 text-gray-500 dark:text-gray-400 text-sm leading-6 min-w-0',
base: 'flex items-center gap-x-1.5 group font-semibold min-w-0',
label: 'block truncate',
icon: {
base: 'flex-shrink-0 w-5 h-5',
active: '',
inactive: ''
},
divider: {
base: 'flex-shrink-0 w-5 h-5 rtl:rotate-180'
},
active: 'text-primary-500 dark:text-primary-400',
inactive: ' hover:text-gray-700 dark:hover:text-gray-200',
default: {
divider: 'i-heroicons-chevron-right-20-solid'
}
}