대시보드 Navbar

대시보드에 표시할 응답형 navbar입니다.A responsible navbar to display in a dashboard.

Usage

DashboardNavbar 구성 요소는 DashboardSidebar 구성 요소와 통합되는 응답형 탐색 막대입니다. 대시보드 레이아웃에서 응답형 탐색을 활성화하는 모바일 전환 단추가 포함되어 있습니다.

DashboardPanel 구성 요소의 header 슬롯 내에서 사용합니다.

pages/index.vue

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

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

left, default 및 right 슬롯을 사용하여 navbar를 사용자 지정합니다.

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>

이 예제에서는 오른쪽 슬롯에 있는 Tabs 구성 요소를 사용하여 일부 탭을 표시합니다.

제목

title Prop 을 사용하여 navbar 의 제목을 설정합니다.

title

Dashboard

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

Icon 이미지

icon prop 를 사용하여 navbar 아이콘을 설정합니다.

icon

Dashboard

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

토글

toggle 소품을 사용하여 DashboardSidebar 구성 요소를 여는 모바일에 표시되는 토글 버튼을 사용자 정의합니다.

Button 구성 요소의 모든 속성을 전달하여 사용자 정의할 수 있습니다.

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

면 전환

toggle-side 소품을 사용하여 토글 버튼의 측면을 변경합니다. 기본값은 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; }`

Theme 테마

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

변경 로그

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.