Die DashboardToolbar

Eine Toolbar, die unter der Navbar in einem Dashboard angezeigt wird.

Bearbeiten

Die DashboardToolbar-Komponente wird verwendet, um eine Symbolleiste unter der Komponente DashboardNavbar anzuzeigen.

Verwenden Sie es innerhalb des header-Steckplatzes der DashboardPanel-Komponente:

pages/index.vue

<script setup lang="ts">
definePageMeta({
  layout: 'dashboard'
})
</script>

<template>
  <UDashboardPanel>
    <template #header>
      <UDashboardNavbar />

      <UDashboardToolbar />
    </template>
  </UDashboardPanel>
</template>

Verwenden Sie die left, default und right Steckplätze, um die Symbolleiste anzupassen.

<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>

In diesem Beispiel verwenden wir die Komponente NavigationMenu, um einige Links darzustellen.

API (englisch)

Props (englisch)

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`ui`		`{ root?: SlotClass; left?: SlotClass; right?: SlotClass; }`

Slots Bearbeiten

Slot	Type
`default`	`{}`
`left`	`{}`
`right`	`{}`

Theme (englisch)

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 (englisch)

No recent changes

DashboardSidebarToggle

A Button to toggle the sidebar on mobile.

Chat

Build AI chat interfaces with streaming, reasoning, and tool calling.