仪表盘面板

一个可在仪表盘中显示的，可调整大小的面板。

用法

DashboardPanel 组件用于显示面板。其状态（大小、折叠等）将根据您提供给 DashboardGroup 组件的 storage 和 storage-key 属性进行保存。

将其用作 DashboardGroup 组件的默认插槽，您可以将多个面板并排放置。

pages/index.vue

<script setup lang="ts">
definePageMeta({
  layout: 'dashboard'
})
</script>

<template>
  <UDashboardPanel id="inbox-1" resizable />

  <UDashboardPanel id="inbox-2" class="hidden lg:flex" />
</template>

建议在不同页面中使用多个面板时设置 id，以避免冲突。

当使用 resizable 属性时，此组件没有单个根元素，因此如果您使用页面过渡或需要单个根进行布局，请将其包装在容器中（例如，<div class="flex flex-1">）。

使用 header、body 和 footer 插槽自定义面板，如果您不希望主体可滚动且带有内边距，则使用默认插槽。

收件箱

<template>
  <UDashboardPanel resizable>
    <template #header>
      <UDashboardNavbar title="Inbox">
        <template #leading>
          <UDashboardSidebarCollapse />
        </template>
      </UDashboardNavbar>
    </template>

    <template #body>
      <Placeholder class="h-full" />
    </template>
  </UDashboardPanel>
</template>

大多数情况下，您将在 header 插槽中使用 DashboardNavbar 组件。

可调整大小

使用 resizable 属性使面板可调整大小。

resizable

尺寸

使用 min-size、max-size 和 default-size 属性自定义面板的大小。

minSize

defaultSize

maxSize

<template>
  <UDashboardPanel resizable>
    <template #body>
      <Placeholder class="h-96" />
    </template>
  </UDashboardPanel>
</template>

默认情况下，大小以百分比计算。您可以使用 DashboardGroup 组件上的 unit 属性更改此设置。

API

属性

属性	默认值	类型
`id`	`useId()`	`string` 面板的 ID。
`minSize`	`15`	`number` 面板的最小尺寸。
`maxSize`	`100`	`number` 面板的最大尺寸。
`defaultSize`	`0`	`number` 面板的默认尺寸。
`resizable`	`false`	`boolean` 是否允许用户调整面板大小。
`ui`		`{ root?: ClassNameValue; body?: ClassNameValue; handle?: ClassNameValue; }`

插槽

插槽	类型
`default`	`{}`
`页头`	`{}`
`主体`	`{}`
`页脚`	`{}`
`resize-handle`	`{ onMouseDown: (e: MouseEvent) => void; onTouchStart: (e: TouchEvent) => void; onDoubleClick: (e: MouseEvent) => void; }`

主题

app.config.ts

export default defineAppConfig({
  ui: {
    dashboardPanel: {
      slots: {
        root: 'relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default shrink-0',
        body: 'flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6',
        handle: ''
      },
      variants: {
        size: {
          true: {
            root: 'w-full lg:w-(--width)'
          },
          false: {
            root: 'flex-1'
          }
        }
      }
    }
  }
})

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: {
        dashboardPanel: {
          slots: {
            root: 'relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default shrink-0',
            body: 'flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6',
            handle: ''
          },
          variants: {
            size: {
              true: {
                root: 'w-full lg:w-(--width)'
              },
              false: {
                root: 'flex-1'
              }
            }
          }
        }
      }
    })
  ]
})

更新日志

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

DashboardNavbar

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

DashboardResizeHandle

用于调整侧边栏或面板大小的句柄。