Stepper
fandhe-frontend-wireframe-ui の複数ステップ進捗表示プレースホルダーです。ステップ名のスライスと現在ステップの index から、番号付きステップの横並び進捗表示だけを示す非インタラクティブな部品です。API は stepper(steps, active, size) の 3 引数(詳細は下の引数表を参照)で、props 構造体は導入していません。
Stepper は blocks.pm に対応する部品を持たない、wireframe-ui 独自追加の部品です(詳細は docs/design/wireframe-ui-architecture.md §8「独自追加部品」を参照)。近い視覚的な参照が欲しい場合は blocks.pm を直接確認してください。
各ステップは div/span のみで出力し、<ol>/<li>/<button>/ <a href> のいずれも実装しない表示専用プレースホルダーです。実際に操作可能なステップ表示が必要な場合は Steps(Themes) / Steps(Primitives) を検討してください。
Demo
既定(2 番目が現在ステップ)
1アカウント作成
2プラン選択
3支払い
4完了
先頭ステップが現在(完了ステップなし)
1アカウント作成
2プラン選択
3支払い
4完了
範囲外の active(全ステップ完了・現在ステップなし)
1アカウント作成
2プラン選択
3支払い
4完了
5 ステップ
1申込
2審査
3契約
4納品
5検収
Sm
1アカウント作成
2プラン選択
3支払い
4完了
Lg
1アカウント作成
2プラン選択
3支払い
4完了
引数表
| 引数 | 型 | 既定値 | 説明 |
|---|---|---|---|
| steps | &[&str] | - | ステップ名のスライス。空スライスのときはルート要素のみを出力する。 |
| active | usize | - | 現在ステップの index(0 始まり)。steps.len() 以上のときは全ステップ完了として扱う(パニックしない)。 |
| size | Size | Size::Md | サイズ段階(xs〜xl)。 |
原案差分メモ
- 独自追加部品: blocks.pm に対応部品が存在しないため、
docs/design/wireframe-ui-architecture.md§6 の汎用変換規約から独立に設計しました。API は「ステップ名のスライス + 現在 index +Size」の最小構成のみで、blocks.pm の Figma プロパティを参照・書き写していません。 - 状態写像は 3 分岐:
i < activeは完了(data-complete)、i == activeは現在(既存共通型props::Activeを再利用したdata-active)、i > activeは未着手(属性なし)です。完了状態に専用の型を新設せず、fandhe_frontend_core::attr_ifを部品ローカルで直接呼んでいます(headless-ui のsteps/questionnaireが使う「complete」語彙に合わせた命名)。 activeの範囲外はエラーにしない:active >= steps.len()(空スライスを含む)は「全ステップ完了・現在ステップなし」として扱います。clampもpanicもしません(呼び出し側が全ステップ完了を表現したいケースをそのまま許容する設計)。- 番号は常に表示(チェックアイコンへの差し替えは不採用): 完了ステップも
checkboxのようにグリフへ差し替えず、常にi + 1の番号を表示します。アイコン差し替えは装飾用のaria-hidden付与を要し、非対話テストの単純さを崩すため見送りました。 - 横並びのみ:
props::Orientationは受け付けません。縦並び表示は対象外としています(必要であれば別イシューとして起票を検討)。 - 連結線はノードを持たない: ステップ間の連結線は CSS の
::before疑似要素のみで描き、余分なノードを出しません。 - スクリーンショット非掲載:
docs/design/reference-screenshots/への blocks.pm 画像取り込みは #2602 で fail-closed に非掲載と確定しています。本ページも画像は置かず、上記の外部リンクのみで代替します。 - 配色はグレースケール:
--fw-wire-ink/--fw-wire-ink-muted/--fw-wire-fillトークンのみを使い、ColorPaletteには依存しません。