仪表盘部分
一个可自定义的部分，用于在 DashboardPanelContent 中显示内容。
用法
使用 DashboardSection 组件将相关内容分组在一起。
使用 icon、title 和 description 道具来自定义部分的内容。
资料
这些信息将公开显示。
<template>
<UDashboardSection
icon="i-heroicons-user"
title="Profile"
description="This information will be displayed publicly."
orientation="vertical"
class="px-4 mt-6"
/>
</template>
你也可以添加一些按钮，使用 links 道具，或使用 #links 槽。
资料
这些信息将公开显示。
<template>
<UDashboardSection
icon="i-heroicons-user"
title="Profile"
description="This information will be displayed publicly."
:links="[{ label: 'Save changes', color: 'black' }]"
/>
</template>
DashboardSection 通常放在 DashboardPanelContent 中。
pages/settings/index.vue
<template>
<UDashboardPanelContent>
<UDashboardSection title="Theme">
<template #links>
<UColorModeSelect />
</template>
</UDashboardSection>
<UDivider class="mb-4" />
<UDashboardSection title="Profile">
<template #links>
<UButton type="submit" label="Save changes" color="black" />
</template>
<UFormGroup>
<UInput />
</UFormGroup>
</UDashboardSection>
</UDashboardPanelContent>
</template>
槽
图标
{}
标题
{}
描述
{}
links
{}
默认
{}
道具
图标
字符串
未定义标题
字符串
未定义描述
字符串
未定义ui
任何
{}方向
"vertical" | "horizontal"
"vertical"links
(按钮 & { click?: (...args: any[]) => void; })[]
[]配置
{
wrapper: 'divide-y divide-gray-200 dark:divide-gray-800 space-y-6 *:pt-6 first:*:pt-2 first:*:pt-0 mb-6',
container: 'flex flex-wrap items-center justify-between gap-4',
inner: 'flex items-start gap-4',
title: 'text-gray-900 dark:text-white font-semibold',
description: 'mt-1 text-sm text-gray-500 dark:text-gray-400',
links: 'flex flex-wrap items-center gap-1.5',
icon: {
wrapper: 'inline-flex',
base: 'w-12 h-12 flex-shrink-0 text-gray-900 dark:text-white'
}
}