DashboardGroupPRO

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

用法

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

persistent

true

boolean

unit

'%'

"%" | "rem" | "px"

插槽

插槽类型
default

{}

主题

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

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