仪表盘导航栏
一个用于在仪表盘中显示的响应式导航栏。
用法
DashboardNavbar 组件是一个响应式导航栏，可与 DashboardSidebar 组件集成。它包含一个移动端切换按钮，用于在仪表盘布局中实现响应式导航。
在 DashboardPanel 组件的 header 插槽中使用它。
pages/index.vue
<script setup lang="ts">
definePageMeta({
layout: 'dashboard'
})
</script>
<template>
<UDashboardPanel>
<template #header>
<UDashboardNavbar />
</template>
</UDashboardPanel>
</template>
使用 left、default 和 right 插槽来自定义导航栏。
收件箱
4<script setup lang="ts">
import type { TabsItem } from '@nuxt/ui'
const items: TabsItem[] = [
{
label: 'All',
value: 'all'
},
{
label: 'Unread',
value: 'unread'
}
]
</script>
<template>
<UDashboardNavbar title="Inbox">
<template #leading>
<UDashboardSidebarCollapse />
</template>
<template #trailing>
<UBadge label="4" variant="subtle" />
</template>
<template #right>
<UTabs :items="items" default-value="all" size="sm" class="w-40" :content="false" />
</template>
</UDashboardNavbar>
</template>
在此示例中，我们在右侧插槽中使用 Tabs 组件来显示一些标签页。
标题
使用 title 属性来设置导航栏的标题。
Dashboard
<template>
<UDashboardNavbar title="Dashboard" />
</template>
Icon
使用 icon 属性来设置导航栏的图标。
Dashboard
<template>
<UDashboardNavbar title="Dashboard" icon="i-lucide-house" />
</template>
Toggle
使用 toggle 属性来定制移动端显示的切换按钮，该按钮用于打开 DashboardSidebar 组件。
您可以将 Button 组件的任何属性传递过来以进行自定义。
<template>
<UDashboardNavbar
title="Dashboard"
:toggle="{
color: 'primary',
variant: 'subtle',
class: 'rounded-full'
}"
/>
</template>
切换侧边
使用 toggle-side 属性来更改切换按钮的位置。默认为 right。
<template>
<UDashboardNavbar
title="Dashboard"
toggle-side="right"
/>
</template>
API
属性
| 属性 | 默认值 | 类型 |
|---|---|---|
as | 'div' | any此组件应渲染为的元素或组件。 |
图标 | any显示在标题旁边的图标。 | |
title | string | |
toggle | true | boolean | Omit<ButtonProps, LinkPropsKeys>自定义用于打开侧边栏的切换按钮。 |
toggleSide | 'left' | "left" | "right"渲染切换按钮的侧边位置。 |
ui | { root?: ClassNameValue; left?: ClassNameValue; icon?: ClassNameValue; title?: ClassNameValue; center?: ClassNameValue; right?: ClassNameValue; toggle?: ClassNameValue; } |
插槽
| 插槽 | 类型 |
|---|---|
title | {} |
前置 | DashboardNavbarSlotsProps & { ui: object; } |
尾部 | DashboardNavbarSlotsProps & { ui: object; } |
left | DashboardNavbarSlotsProps |
default | DashboardNavbarSlotsProps |
right | DashboardNavbarSlotsProps |
toggle | DashboardNavbarSlotsProps & { ui: object; } |
主题
app.config.ts
export default defineAppConfig({
ui: {
dashboardNavbar: {
slots: {
root: 'h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5',
left: 'flex items-center gap-1.5 min-w-0',
icon: 'shrink-0 size-5 self-center me-1.5',
title: 'flex items-center gap-1.5 font-semibold text-highlighted truncate',
center: 'hidden lg:flex',
right: 'flex items-center shrink-0 gap-1.5',
toggle: ''
},
variants: {
toggleSide: {
left: {
toggle: ''
},
right: {
toggle: ''
}
}
}
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
dashboardNavbar: {
slots: {
root: 'h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5',
left: 'flex items-center gap-1.5 min-w-0',
icon: 'shrink-0 size-5 self-center me-1.5',
title: 'flex items-center gap-1.5 font-semibold text-highlighted truncate',
center: 'hidden lg:flex',
right: 'flex items-center shrink-0 gap-1.5',
toggle: ''
},
variants: {
toggleSide: {
left: {
toggle: ''
},
right: {
toggle: ''
}
}
}
}
}
})
]
})