DashboardToolbar
Una barra de herramientas para mostrar debajo de la barra de navegación en un tablero.
xph0000xUso
El componente DashboardToolbar se utiliza para mostrar una barra de herramientas bajo el componente DashboardNavbar.
Úselo dentro de la ranura header del componente DashboardPanel:
pages/index.vue
<script setup lang="ts">
definePageMeta({
layout: 'dashboard'
})
</script>
<template>
<UDashboardPanel>
<template #header>
<UDashboardNavbar />
<UDashboardToolbar />
</template>
</UDashboardPanel>
</template>
Utilice las ranuras left, default y right para personalizar la barra de herramientas.
<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>En este ejemplo, usamos el componente NavigationMenu para representar algunos enlaces.
API (Edición española)
Accesorios
| Prop | Default | Type |
|---|---|---|
as | 'div' | anyThe element or component this component should render as. |
ui | { root?: SlotClass; left?: SlotClass; right?: SlotClass; } |
Slots (Edición española)
| Slot | Type |
|---|---|
default | {} |
left | {} |
right | {} |
Temas
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'
}
}
}
})
]
})Changelog (Edición española)
No recent changes