대시보드 도구막대
대시보드의 탐색 표시줄 아래에 표시할 도구 모음입니다.
Usage
DashboardToolbar 구성 요소는 DashboardNavbar 구성 요소 아래에 도구 모음을 표시하는 데 사용됩니다.
DashboardPanel 구성 요소의 header 슬롯 내부에서 사용합니다.
pages/index.vue
<script setup lang="ts">
definePageMeta({
layout: 'dashboard'
})
</script>
<template>
<UDashboardPanel>
<template #header>
<UDashboardNavbar />
<UDashboardToolbar />
</template>
</UDashboardPanel>
</template>
left, default 및 right 슬롯을 사용하여 도구 모음을 사용자 지정합니다.
<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'
const items: NavigationMenuItem[][] = [
[
{
label: 'General',
icon: 'i-lucide-user',
active: true
},
{
label: 'Members',
icon: 'i-lucide-users'
},
{
label: 'Notifications',
icon: 'i-lucide-bell'
}
],
[
{
label: 'Documentation',
icon: 'i-lucide-book-open',
to: 'https://ui.nuxt.com/docs',
target: '_blank'
},
{
label: 'Help & Feedback',
icon: 'i-lucide-help-circle',
to: 'https://github.com/nuxt/ui/issues',
target: '_blank'
}
]
]
</script>
<template>
<UDashboardToolbar>
<UNavigationMenu :items="items" highlight class="flex-1" />
</UDashboardToolbar>
</template>이 예제에서는 NavigationMenu 구성 요소를 사용하여 일부 링크를 렌더링합니다.
API 파일
Props (### Props)
| Prop | Default | Type |
|---|---|---|
as | 'div' | anyThe element or component this component should render as. |
ui | { root?: SlotClass; left?: SlotClass; right?: SlotClass; } |
슬롯
| Slot | Type |
|---|---|
default | {} |
left | {} |
right | {} |
Theme (## 테마)
app.config.ts
export default defineAppConfig({
ui: {
dashboardToolbar: {
slots: {
root: 'shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5 overflow-x-auto min-h-[49px]',
left: 'flex items-center gap-1.5',
right: 'flex items-center gap-1.5'
}
}
}
})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: {
dashboardToolbar: {
slots: {
root: 'shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5 overflow-x-auto min-h-[49px]',
left: 'flex items-center gap-1.5',
right: 'flex items-center gap-1.5'
}
}
}
})
]
})변경 로그
No recent changes