组件
水平导航
显示水平链接列表。
用法
将数组传递给 HorizontalNavigation 组件的 links 属性。每个链接可以具有以下属性
label- 链接的标签。labelClass- 链接标签的类名。icon- 链接的图标。iconClass- 链接图标的类名。avatar- 链接的头像。您可以传递 Avatar 组件的所有属性。badge- 在标签旁边显示的徽章。您可以传递 Badge 组件的所有属性。click- 链接的点击处理程序。
您还可以传递来自 NuxtLink 组件的任何属性，例如 to、exact 等。
<script setup lang="ts">
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: 'Horizontal Navigation',
icon: 'i-heroicons-chart-bar',
to: '/components/horizontal-navigation'
}, {
label: 'Command Palette',
icon: 'i-heroicons-command-line',
to: '/components/command-palette'
}]
</script>
<template>
<UHorizontalNavigation :links="links" class="border-b border-gray-200 dark:border-gray-800" />
</template>
章节
将您的导航链接分组到不同的章节中，它们将通过 justify-between 弹性盒布局分开显示。
您可以通过将数组数组传递给 HorizontalNavigation 组件的 links 属性来实现这一点。
<script setup lang="ts">
const links = [
[{
label: 'Installation',
icon: 'i-heroicons-home',
to: '/getting-started/installation'
}, {
label: 'Horizontal Navigation',
icon: 'i-heroicons-chart-bar',
to: '/components/horizontal-navigation'
}, {
label: 'Command Palette',
icon: 'i-heroicons-command-line',
to: '/components/command-palette'
}], [{
label: 'Examples',
icon: 'i-heroicons-light-bulb'
}, {
label: 'Help',
icon: 'i-heroicons-question-mark-circle'
}]
]
</script>
<template>
<UHorizontalNavigation :links="links" class="border-b border-gray-200 dark:border-gray-800" />
</template>
插槽
您可以使用插槽来自定义链接显示。
默认
使用 #default 插槽来自定义链接标签。您将在插槽作用域中访问到 link 和 isActive 属性。
<script setup lang="ts">
const links = [{
label: 'Horizontal Navigation',
to: '/components/horizontal-navigation'
}, {
label: 'Command Palette',
to: '/components/command-palette'
}, {
label: 'Table',
to: '/components/table'
}]
</script>
<template>
<UHorizontalNavigation :links="links">
<template #default="{ link }">
<span class="group-hover:text-primary relative">{{ link.label }}</span>
</template>
</UHorizontalNavigation>
</template>
头像
使用 #avatar 插槽来自定义链接头像。您将在插槽作用域中访问到 link 和 isActive 属性。
图标
使用 #icon 插槽来自定义链接图标。您将在插槽作用域中访问到 link 和 isActive 属性。
徽章
使用 #badge 插槽来自定义链接徽章。您将在插槽作用域中访问到 link 和 isActive 属性。
属性
ui
{ wrapper?: string; container?: string; inner?: string; base?: string; before?: string; after?: string; active?: string; inactive?: string; label?: string; icon?: DeepPartial<{ base: string; active: string; inactive: string; }, any>; avatar?: DeepPartial<...>; badge?: DeepPartial<...>; } & { ...; } & { ...; }
{}链接
HorizontalNavigationLink[] | HorizontalNavigationLink[][]
[]配置
{
wrapper: 'relative w-full flex items-center justify-between',
container: 'flex items-center min-w-0',
inner: 'min-w-0',
base: 'group relative w-full flex items-center gap-1.5 px-2.5 py-3.5 rounded-md font-medium text-sm focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75',
before: 'before:absolute before:inset-x-0 before:inset-y-2 before:inset-px before:rounded-md hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50',
after: 'after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2',
active: 'text-gray-900 dark:text-white after:bg-primary-500 dark:after:bg-primary-400 after:rounded-full',
inactive: 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white',
label: 'truncate relative',
icon: {
base: 'flex-shrink-0 w-5 h-5 relative',
active: 'text-gray-700 dark:text-gray-200',
inactive: 'text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200'
},
avatar: {
base: 'flex-shrink-0',
size: '2xs'
},
badge: {
base: 'flex-shrink-0 ms-auto relative rounded',
color: 'gray',
variant: 'solid',
size: 'xs'
}
}