DashboardNavbar

Een responsieve navbar om weer te geven in een dashboard.

Gebruik

De DashboardNavbar-component is een responsieve navigatiebalk die kan worden geïntegreerd met de DashboardSidebar -component. Het bevat een mobiele schakelknop om responsieve navigatie in dashboardlay-outs mogelijk te maken.

Gebruik het in de header-sleuf van de DashboardPanel :

pages/index.vue

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

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

Gebruik de left-, default- en right-slots om de navbar aan te passen.

Inbox

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

In dit voorbeeld gebruiken we de Tabs component in de rechtersleuf om enkele tabbladen weer te geven.

Titel

Gebruik de title prop om de titel van de navbar in te stellen.

title

Dashboard

<template>
  <UDashboardNavbar title="Dashboard" />
</template>

Icoon

Gebruik de icon prop om het pictogram van de navbar in te stellen.

icon

Dashboard

<template>
  <UDashboardNavbar title="Dashboard" icon="i-lucide-house" />
</template>

Toggle

Gebruik de toggle-prop om de schakelknop aan te passen die op mobiel wordt weergegeven en die de DashboardSidebar opent.

U kunt elke eigenschap van de Button component doorgeven om deze aan te passen.

<template>
  <UDashboardNavbar
    title="Dashboard"
    :toggle="{
      color: 'primary',
      variant: 'subtle',
      class: 'rounded-full'
    }"
  />
</template>

Zijde uitschakelen

Gebruik de toggle-side prop om de zijkant van de schakelknop te wijzigen. Standaard right.

<template>
  <UDashboardNavbar
    title="Dashboard"
    toggle-side="right"
  />
</template>

API

Props

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`icon`		`any` The icon displayed next to the title.
`title`		`string`
`toggle`	`true`	`boolean \| Omit<ButtonProps, LinkPropsKeys>` Customize the toggle button to open the sidebar. `{ color: 'neutral', variant: 'ghost' }`
`toggleSide`	`'left'`	`"left" \| "right"` The side to render the toggle button on.
`ui`		`{ root?: SlotClass; left?: SlotClass; icon?: SlotClass; title?: SlotClass; center?: SlotClass; right?: SlotClass; toggle?: SlotClass; }`

Slots

Slot	Type
`title`	`{}`
`leading`	`DashboardNavbarSlotsProps & { ui: object; }`
`trailing`	`DashboardNavbarSlotsProps & { ui: object; }`
`left`	`DashboardNavbarSlotsProps`
`default`	`DashboardNavbarSlotsProps`
`right`	`DashboardNavbarSlotsProps`
`toggle`	`DashboardNavbarSlotsProps & { ui: object; }`

Thema

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: ''
              }
            }
          }
        }
      }
    })
  ]
})

Wijzigingsgelog

No recent changes

DashboardGroup

A fixed layout component that provides context for dashboard components with sidebar state management and persistence.

DashboardPanel

A resizable panel to display in a dashboard.