DashboardGroupPRO

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

用法

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

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

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

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

API

属性

属性默认值类型
as

'div'

any

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

存储

'cookie'

"cookie" | "local"

用于大小的存储方式。

存储键

'dashboard'

string

用于自动保存大小的唯一ID。

持久化

true

boolean

是否将大小持久化到存储中。

单位

'%'

"%" | "rem" | "px"

用于大小值的单位。

插槽

插槽类型
默认值

{}

主题

app.config.ts
export default defineAppConfig({
  uiPro: {
    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({
      uiPro: {
        dashboardGroup: {
          base: 'fixed inset-0 flex overflow-hidden'
        }
      }
    })
  ]
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      uiPro: {
        dashboardGroup: {
          base: 'fixed inset-0 flex overflow-hidden'
        }
      }
    })
  ]
})

ContextMenu

一个用于在元素上右键点击时显示操作的菜单。

DashboardNavbar

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