Dashboard그룹

사이드바 상태 관리 및 지속성을 갖춘 대시보드 구성 요소에 컨텍스트를 제공하는 고정 레이아웃 구성 요소입니다.

Usage

DashboardGroup 구성 요소는 DashboardSidebar 및 [DashboardPanel](/docs/components/dashboard-panelxph08x 구성 요소를 래핑하여 응답형 대시보드 인터페이스를 생성하는 기본 레이아웃입니다.

레이아웃 또는 app.vue에서 사용하십시오 :

layouts/dashboard.vue

<template>
  <UDashboardGroup>
    <UDashboardSidebar />

    <slot />
  </UDashboardGroup>
</template>

API

Props (### Props)

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`storage`	`'cookie'`	`"cookie" \| "local"` The storage to use for the size.
`storageKey`	`'dashboard'`	`string` Unique id used to auto-save size.
`storageOptions`		`Record<string, any>` Options to pass to the underlying storage (`useCookie` or `useStorage`).
`persistent`	`true`	`boolean` Whether to persist the size in the storage.
`unit`	`'%'`	`"%" \| "rem" \| "px"` The unit to use for size values.
`ui`		`{ base?: any; }`

Slots

Slot	Type
`default`	`{}`

Theme 테마

app.config.ts

export default defineAppConfig({
  ui: {
    dashboardGroup: {
      base: 'fixed inset-0 flex overflow-hidden'
    }
  }
})

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: {
        dashboardGroup: {
          base: 'fixed inset-0 flex overflow-hidden'
        }
      }
    })
  ]
})

변경 로그

No recent changes

PricingTable

A responsive pricing table component that displays tiered pricing plans with feature comparisons.

DashboardNavbar

A responsive navbar to display in a dashboard.