最新
数据与KPIKPI Row
A bare row of headline metrics in a `<dl>` that reflows from one column to four.
#stats#kpi#metrics
3 个框架初级
Loading…
Period-over-period stat cards showing the current value, delta and the prior figure.
<dl class="grid w-full grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
<div class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-gray-900">
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Revenue</dt>
<dd class="mt-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">$48,120</dd>
<p class="mt-2 flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400">
<span class="inline-flex items-center gap-1 font-semibold text-emerald-600 dark:text-emerald-400">
<svg viewBox="0 0 12 12" class="h-3 w-3" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M6 9V3M3 6l3-3 3 3" stroke-linecap="round" stroke-linejoin="round"/></svg>
<span class="sr-only">Increased by</span>12.5%
</span>
vs $42,760 last period
</p>
</div>
</dl>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
items必填 | ComparisonItem[] | - | 要渲染的项目数组。 |
className | string | - | 合并到根元素上的额外类名。 |
Each card states the current value, an accessible delta (arrow + hidden word + colour) and the "vs X last period" baseline so the change is legible without inference. The grid reflows 1 -> 2 -> 4 columns.