用法
构建在卡片组件之上，DashboardCard可以在DashboardPanelContent中使用来显示统计数据、图表等。
使用title、description和icon道具来定制卡片。
最近的销售
您本月产生了265笔销售。
<template>
<UDashboardCard
title="Recent sales"
description="You made 265 sales this month."
icon="i-heroicons-chart-bar"
>
<UProgress />
</UDashboardCard>
</template>
您还可以使用links道具添加一些按钮，或者使用#links插槽。
排名前列的国家
您拥有来自150个国家/地区的12,000名用户。
<template>
<UDashboardCard
title="Top countries"
description="You have 12,000 users from 150 countries."
:links="[{ label: 'Learn more', color: 'gray', trailingIcon: 'i-heroicons-arrow-right-20-solid' }]"
/>
</template>
插槽
页眉
{}
图标
{}
标题
{}
描述
{}
链接
{}
默认
{}
页脚
{}
道具
图标
字符串
未定义标题
字符串
未定义描述
字符串
未定义链接
(按钮& { click?: (...args: any[]) => void; })[]
[]ui
任何
{}配置
{
divide: '',
header: {
base: 'flex flex-wrap items-center justify-between gap-2',
inner: 'flex items-start gap-4',
padding: 'px-4 py-4 sm:px-6'
},
title: 'text-gray-900 dark:text-white font-semibold',
description: 'mt-1 text-gray-500 dark:text-gray-400 text-sm',
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'
}
}