DashboardPanel 组件用于显示面板。它的状态（大小、折叠等）将根据您提供给 DashboardGroup 组件的 storage 和 storage-key 属性进行保存。
在 DashboardGroup 组件的默认插槽中使用它，您可以将多个面板并排放置。
<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 :min-size="22" :default-size="35" :max-size="40">
<template #body>
<Placeholder class="h-96" />
</template>
</UDashboardPanel>
</template>
| 属性 | 默认值 | 类型 |
|---|---|---|
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; } |
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'
}
}
}
}
}
})
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'
}
}
}
}
}
})
]
})