仪表盘面板

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

用法

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 属性可以使面板可调整大小。

可调整大小

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

尺寸

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

最小尺寸

默认尺寸

最大尺寸

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

默认情况下，尺寸以百分比计算。您可以通过 DashboardGroup 组件上的 unit 属性来更改此设置。

API

属性

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

插槽

插槽	类型
`default`	`{}`
`页头`	`{}`
`主体`	`{}`
`页脚`	`{}`
`resizible-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

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