新着
統計・KPIKPI Row
A bare row of headline metrics in a `<dl>` that reflows from one column to four.
#stats#kpi#metrics
3 個のフレームワーク初級
Loading…
Labelled progress bars showing current value against a target with an accessible ratio.
<!--
Each bar is a real progressbar: aria-valuenow is the current value and
aria-valuemax is the target, so the ratio is exposed as data, not implied by
pixels. The fill width is the only inline style - it is a computed value, not a
colour, which is why it cannot be a static utility class.
-->
<dl class="w-full space-y-6">
<div>
<div class="flex items-baseline justify-between gap-3">
<dt class="text-sm font-medium text-gray-700 dark:text-gray-300">New signups</dt>
<dd class="text-sm text-gray-500 tabular-nums dark:text-gray-400"><span class="font-semibold text-gray-900 dark:text-gray-100">740</span> / 1,000</dd>
</div>
<div class="mt-2 h-2 w-full overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800" role="progressbar" aria-valuenow="740" aria-valuemin="0" aria-valuemax="1000" aria-label="New signups">
<div class="h-full rounded-full bg-blue-600 dark:bg-blue-500" style="width:74%"></div>
</div>
</div>
</dl>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
items必須 | GoalItem[] | - | レンダリングする項目の配列。 |
className | string | - | ルート要素にマージされる追加クラス。 |
Each bar is a real `progressbar` whose `aria-valuenow` is the value and `aria-valuemax` is the target, so the ratio is data rather than pixels. The fill width is the only inline style because it is a computed value; the bar turns emerald once the goal is reached. Add a `unit` suffix like `%` or `k`.