新着
ステッパーHorizontal Numbered Stepper
A row of numbered markers joined by connectors, with completed steps shown as checks.
#stepper#horizontal#numbered
3 個のフレームワーク初級
Loading…
A horizontal stepper whose markers hold your icons, swapping to a check once complete.
<!--
Same 320px survival trick as the numbered row: icons stay, labels appear only
from sm up. A completed step swaps its icon for a check so "done" reads at a
glance without relying on colour alone.
-->
<nav aria-label="Progress" class="w-full">
<ol class="flex items-center">
<li class="flex flex-1 items-center">
<div class="flex items-center gap-2 sm:gap-3">
<span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-blue-600 text-white">
<svg viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5" aria-hidden="true"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0l-3.5-3.5a1 1 0 1 1 1.4-1.4l2.8 2.8 6.8-6.8a1 1 0 0 1 1.4 0Z" clip-rule="evenodd"/></svg>
</span>
<span class="hidden text-sm font-medium text-gray-900 sm:inline dark:text-gray-100">Cart</span>
</div>
<span aria-hidden="true" class="mx-2 h-px flex-1 bg-blue-600 sm:mx-3"></span>
</li>
<li class="flex flex-1 items-center" aria-current="step">
<div class="flex items-center gap-2 sm:gap-3">
<span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full border-2 border-blue-600 text-blue-600 dark:text-blue-400">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-5 w-5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M3 7h18M3 12h18M3 17h12"/></svg>
</span>
<span class="hidden text-sm font-medium text-gray-900 sm:inline dark:text-gray-100">Details</span>
</div>
<span aria-hidden="true" class="mx-2 h-px flex-1 bg-gray-200 sm:mx-3 dark:bg-gray-700"></span>
</li>
<li class="flex items-center">
<div class="flex items-center gap-2 sm:gap-3">
<span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-gray-300 text-gray-500 dark:border-gray-700 dark:text-gray-400">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-5 w-5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
</span>
<span class="hidden text-sm font-medium text-gray-500 sm:inline dark:text-gray-400">Confirm</span>
</div>
</li>
</ol>
</nav>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
steps必須 | { label: string; icon: ReactNode }[] | - | プロセスの手順（順序どおり）。 |
current | number | 0 | Current |
Each step takes an `icon` node rendered inside the marker; a completed step shows a check instead so "done" never rides on colour alone. Like every horizontal row here, labels appear only from `sm` up so it survives 320px.