仪表盘组

一个固定布局组件，为仪表盘组件提供上下文，并支持侧边栏状态管理和持久化。

用法

DashboardGroup 组件是主要的布局组件，它包裹着 DashboardSidebar 和 DashboardPanel 组件，以创建响应式仪表盘界面。

在布局或 app.vue 中使用它

layouts/dashboard.vue

<template>
  <UDashboardGroup>
    <UDashboardSidebar />

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

API

属性

属性	默认值	类型
`as`	`'div'`	`any` 此组件应渲染为的元素或组件。
`storage`	`'cookie'`	`"cookie" \| "local"` 用于存储大小的存储。
`storageKey`	`'dashboard'`	`string` 用于自动保存大小的唯一 ID。
`persistent`	`true`	`boolean` 是否将大小持久化到存储中。
`unit`	`'%'`	`"%" \| "rem" \| "px"` 用于大小值的单位。

插槽

插槽	类型
`default`	`{}`

主题

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

更新日志

5cb65— 特性：导入 @nuxt/ui-pro 组件

定价表

一个响应式的定价表组件，显示分层定价计划和功能比较。

仪表盘导航栏

一个响应式的导航栏，用于在仪表盘中显示。