Steps

fandhe-frontend-pre-styled-ui の steps mod が提供するスタイル済み Steps 部品です。

複数ステップの進行状況を示すナビゲーション部品です。trigger は現在ステップに aria-current="step" を、separator は role="separator" を固定付与します。パンくずリストによる階層表示には Breadcrumb を検討してください。

Demo

count（全 step 数）+ step（現在位置）を持つ headless Steps の静的掲示。item は complete/current/incomplete の 3 状態を持ち、current な item の trigger のみ aria-current="step" を持ちます（クリック挙動は wasm 層のスコープ外）。orientation（横向き/縦向き）は root の data-orientation 属性により list/content の並び方向が切り替わります。

配送先住所を入力してください。

Features

trigger は現在ステップに aria-current="step" を固定付与する（crates/pre-styled-ui/src/steps.rs テスト list_item_trigger_indicator_separator_delegate_to_headless、行 1256）
separator は role="separator" を持つ（steps.rs テスト同上、行 1258）
indicator の data-state（current/complete）で見た目を切り替える（steps.rs:1134-1142）
StepsVariant（Circle 既定/Bar/Panel/Dot）の root_with/list_with/item_with/indicator_with/separator_with で見た目を切り替える（イシュー #3139、steps.rs）

Anatomy

root
  list
    item
      trigger
        indicator
      separator
  body
    content
    prev-trigger
    next-trigger

API Reference

Arguments

Name	Type	Default	Description
`variant`	`StepsVariant`	`Circle`	`*_with` 系関数が受け取る見た目軸。Circle は既存 `root`/`list`/... とバイト一致、Bar/Panel/Dot は該当 slot へ単独クラスを追加する（イシュー #3139）。

Data Attributes

Part	Attribute	Observed Values
`content`	`data-orientation`	`horizontal`, `vertical`
`content`	`data-state`	`open`
`indicator`	`data-complete`	（値なし）
`indicator`	`data-current`	（値なし）
`indicator`	`data-incomplete`	（値なし）
`indicator`	`data-state`	`complete`, `current`, `incomplete`
`item`	`data-complete`	（値なし）
`item`	`data-current`	（値なし）
`item`	`data-incomplete`	（値なし）
`item`	`data-orientation`	`horizontal`, `vertical`
`item`	`data-state`	`complete`, `current`, `incomplete`
`list`	`data-orientation`	`horizontal`, `vertical`
`root`	`data-orientation`	`horizontal`, `vertical`
`separator`	`data-complete`	（値なし）
`separator`	`data-current`	（値なし）
`separator`	`data-orientation`	`horizontal`, `vertical`
`separator`	`data-state`	`complete`, `current`
`trigger`	`data-complete`	（値なし）
`trigger`	`data-current`	（値なし）
`trigger`	`data-incomplete`	（値なし）
`trigger`	`data-orientation`	`horizontal`, `vertical`
`trigger`	`data-state`	`complete`, `current`, `incomplete`

CSS Variables

Variable	Default
`--fandhe-steps-bar-color`	`var(--fandhe-color-border)`
`--fandhe-steps-connector-min-height`	`2.5rem`
`--fandhe-steps-font-size`	`var(--fandhe-font-font-size-sm)`
`--fandhe-steps-indicator-font-size`	`var(--fandhe-font-font-size-sm)`
`--fandhe-steps-indicator-size`	`2rem`
`--fandhe-steps-thickness`	`2px`

Examples

3 steps, step 2 current

3 ステップ中 2 番目が current の状態を固定表示する例です。

Bar variant

indicator を持たず item 上端の太線で進捗を表すバー型の例です。

Panel variant

枠付き等幅パネルにステップを並べ、シェブロンで区切るパネル型の例です。

Dot variant

ドット列と「n/m」進捗テキストを横に並べるドット型の例です。

2/3

Accessibility

WAI-ARIA

Attribute	Description
aria-current="step"（trigger） / role="separator"（separator）	現在ステップと区切りの意味論（steps.rs テスト list_item_trigger_indicator_separator_delegate_to_headless、行 1256, 1258）。