仪表盘导航栏
一个要在仪表盘面板内显示的导航栏。
用法
DashboardNavbar 组件旨在成为每个 DashboardPanel 的顶部栏。它的高度基于 --header-height 变量，与 DashboardModal、DashboardSlideover 和 DashboardSearch 组件一样。
使用 title 和 badge 属性自定义左侧，或使用 #left 和 #right 插槽。
收件箱
5
<template>
<UDashboardNavbar title="Inbox" badge="5" />
</template>
切换
DashboardPanel 组件通过 collapsible 属性在移动设备上转换为侧滑。其中的 DashboardNavbar 将自动在小屏幕上显示一个标题旁边的切换按钮。
您可以使用 #toggle 插槽自定义此按钮，如 DashboardNavbarToggle 中所述。
DashboardNavbar 通常放置在 DashboardPanel 内。
pages/users.vue
<template>
<UDashboardPage>
<UDashboardPanel>
<UDashboardNavbar title="Users" badge="5">
<template #right>
<UButton label="New user" trailing-icon="i-heroicons-plus" color="gray" />
</template>
</UDashboardNavbar>
</UDashboardPanel>
</UDashboardPage>
</template>
插槽
切换
{}
左侧
{}
标题
{}
徽章
{}
中间
{}
右侧
{}
属性
标题
字符串
未定义ui
DeepPartial<{ wrapper: string; container: string; left: string; title: string; badge: { wrapper: string; base: string; size: "xs"; color: "primary"; variant: "subtle"; }; center: string; right: string; }>
{}徽章
任何
未定义配置
{
wrapper: 'h-[--header-height] flex-shrink-0 flex items-center border-b border-gray-200 dark:border-gray-800 px-4 gap-x-4 min-w-0',
container: 'flex items-center justify-between flex-1 gap-x-1.5 min-w-0',
left: 'flex items-stretch gap-1.5 min-w-0',
title: 'flex items-center gap-1.5 font-semibold text-gray-900 dark:text-white min-w-0',
badge: {
wrapper: 'inline-flex items-center',
base: '',
size: 'xs',
color: 'primary',
variant: 'subtle'
},
center: 'hidden lg:flex',
right: 'flex items-stretch flex-shrink-0 gap-1.5'
}