仪表盘组

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

用法

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

在布局或您的 app.vue 中使用它

layouts/dashboard.vue
<template>
  <UDashboardGroup>
    <UDashboardSidebar />

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

API

属性

属性默认值类型
as

'div'

any

此组件应渲染为的元素或组件。

storage

'cookie'

"cookie" | "local"

用于尺寸存储的 storage。

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

PricingTable

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

DashboardNavbar

用于在仪表板中显示的响应式导航栏。