DashboardPanelPRO

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

用法

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

在 DashboardGroup 组件的默认 slot 中使用它，您可以将多个面板并排放置

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 以避免冲突。

使用 header、body 和 footer slot 定制面板，如果您不想要带内边距的可滚动主体，则可以使用默认 slot。

收件箱

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

    <template #body>
      <Placeholder class="h-full" />
    </template>
  </UDashboardPanel>
</template>
大多数情况下，您会在 header slot 中使用 DashboardNavbar 组件。

可调整大小

使用 resizable prop 使面板可调整大小。

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

尺寸

使用 min-size、max-size 和 default-size prop 定制面板的尺寸。

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

API

Props

Prop默认值类型
minSize

15

number

resizable

false

boolean

id

useId()

string

面板的 ID。

maxSize

100

number

面板的最大尺寸。

defaultSize

0

number

面板的默认尺寸。

ui

{ root?: ClassNameValue; body?: ClassNameValue; handle?: ClassNameValue; }

Slots

Slot类型
default

{}

header

{}

body

{}

footer

{}

resize-handle

{ onMouseDown: (e: MouseEvent) => void; onTouchStart: (e: TouchEvent) => void; }

主题

app.config.ts
export default defineAppConfig({
  uiPro: {
    dashboardPanel: {
      slots: {
        root: 'relative flex flex-col min-w-0 min-h-svh lg:not-last:border-r 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({
      uiPro: {
        dashboardPanel: {
          slots: {
            root: 'relative flex flex-col min-w-0 min-h-svh lg:not-last:border-r 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 uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      uiPro: {
        dashboardPanel: {
          slots: {
            root: 'relative flex flex-col min-w-0 min-h-svh lg:not-last:border-r 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'
              }
            }
          }
        }
      }
    })
  ]
})

DashboardNavbar

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

DashboardResizeHandle

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