O componente DashboardToolbar é usado para exibir uma barra de ferramentas abaixo do componente DashboardNavbar.
Use-o dentro do slot header do componente DashboardPanel:
<script setup lang="ts">
definePageMeta({
layout: 'dashboard'
})
</script>
<template>
<NDashboardPanel>
<template #header>
<NDashboardNavbar />
<NDashboardToolbar />
</template>
</NDashboardPanel>
</template>
Use os slots left, default e right para personalizar a barra de ferramentas.
| 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 | {} |
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'
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nitro/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'
}
}
}
})
]
})