最新
数据与KPIKPI Row
A bare row of headline metrics in a `<dl>` that reflows from one column to four.
#stats#kpi#metrics
3 个框架初级
Loading…
A grid of SVG circular progress rings, each a real `progressbar` with a centred percentage.
<!--
A ring is a circle whose stroke-dasharray is its full circumference and whose
stroke-dashoffset hides the unfilled remainder. It is rotated -90deg so the arc
starts at 12 o'clock. role="progressbar" + aria-valuenow makes it a real
measured value to assistive tech; the centred percentage is the sighted copy.
-->
<dl class="grid w-full grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
<div class="flex flex-col items-center">
<div class="relative" role="progressbar" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100" aria-label="Storage used">
<svg viewBox="0 0 88 88" class="h-24 w-24 -rotate-90 text-blue-600 dark:text-blue-400">
<circle cx="44" cy="44" r="36" fill="none" stroke="currentColor" stroke-width="8" class="text-gray-200 dark:text-gray-800"/>
<circle cx="44" cy="44" r="36" fill="none" stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-dasharray="226.19" stroke-dashoffset="63.33"/>
</svg>
<span class="absolute inset-0 flex items-center justify-center text-lg font-bold text-gray-900 dark:text-gray-100">72%</span>
</div>
<dt class="mt-3 text-sm font-medium text-gray-500 dark:text-gray-400">Storage used</dt>
</div>
</dl>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
items必填 | RingItem[] | - | 要渲染的项目数组。 |
className | string | - | 合并到根元素上的额外类名。 |
Each ring is a circle whose `stroke-dasharray` is its circumference and whose `stroke-dashoffset` hides the remainder, rotated -90deg to start at 12 o'clock. The value is clamped 0-100 and exposed via `role="progressbar"` + `aria-valuenow`; set a Tailwind `color` class per ring to tint the arc through `currentColor`.