新着
ステッパーHorizontal Numbered Stepper
A row of numbered markers joined by connectors, with completed steps shown as checks.
#stepper#horizontal#numbered
3 個のフレームワーク初級
Loading…
A row of even segments that fill as you progress, with a fraction label above.
<!--
Segments instead of a single fill: each one is flex-1 so the bar splits evenly
at any width and never overflows. Filled segments cover done-and-current; the
fraction is restated in text because a bar alone is not an accessible label.
-->
<div class="w-full">
<div class="flex items-baseline justify-between gap-3">
<h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Onboarding</h3>
<p class="shrink-0 text-sm text-gray-500 dark:text-gray-400">2 / 4</p>
</div>
<ol class="mt-2 flex gap-1.5" aria-label="Progress">
<li class="h-1.5 flex-1 rounded-full bg-blue-600"></li>
<li class="h-1.5 flex-1 rounded-full bg-blue-600" aria-current="step"></li>
<li class="h-1.5 flex-1 rounded-full bg-gray-200 dark:bg-gray-700"></li>
<li class="h-1.5 flex-1 rounded-full bg-gray-200 dark:bg-gray-700"></li>
</ol>
</div>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
steps必須 | string[] | - | プロセスの手順（順序どおり）。 |
current | number | 0 | Current |
Each segment is `flex-1`, so the bar splits evenly at any width and never overflows a phone. Filled segments cover done-and-current steps, and the fraction is restated in text because a bar alone is not an accessible label.