新着
リストDivided List
A semantic list of rows with a primary label and an optional trailing meta value.
#list#divided#basic
3 個のフレームワーク初級
Loading…
A list pairing each label with a trailing value and a coloured up/down delta.
<!--
The value and its delta live in a shrink-0 column so the number is never
truncated - a half-shown metric is worse than none. The label column takes
min-w-0 + truncate. Delta colour (green up / red down) is doubled by an arrow
glyph so it is not colour-only. tabular-nums keeps the digits from jittering.
-->
<ul class="w-full divide-y divide-gray-200 overflow-hidden rounded-xl border border-gray-200 bg-white dark:divide-gray-800 dark:border-gray-800 dark:bg-gray-900" aria-label="Statistics">
<li class="flex items-center justify-between gap-3 px-4 py-3">
<span class="min-w-0 flex-1">
<span class="block truncate text-sm font-medium text-gray-900 dark:text-gray-100">Monthly active users</span>
<span class="block truncate text-xs text-gray-500 dark:text-gray-400">Last 30 days</span>
</span>
<span class="flex shrink-0 flex-col items-end">
<span class="text-sm font-semibold tabular-nums text-gray-900 dark:text-gray-100">48,290</span>
<span class="text-xs font-medium tabular-nums text-emerald-600 dark:text-emerald-400">▲ 12.4%</span>
</span>
</li>
</ul>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
items必須 | StatItem[] | - | レンダリングする項目の配列。 |
ariaLabel | string | 'Statistics' | ボタンのアクセシブルな名前。アイコンのみのボタンでは必須です。 |
The value and delta sit in a `shrink-0` column with `tabular-nums` so numbers align and never truncate. The delta colour is doubled by an arrow glyph, keeping the trend readable without relying on colour alone.