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 層のスコープ外）。

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

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）

Anatomy

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

API Reference

Data Attributes

Part	Attribute	Observed Values
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
item	data-state	complete, current, incomplete
list	data-orientation	horizontal
root	data-orientation	horizontal
separator	data-complete
separator	data-current
separator	data-orientation	horizontal
separator	data-state	complete, current
trigger	data-complete
trigger	data-current
trigger	data-incomplete
trigger	data-state	complete, current, incomplete

CSS Variables

Variable	Default
--fandhe-steps-connector-min-height	2.5rem
--fandhe-steps-indicator-size	2rem

Examples

3 steps, step 2 current

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

Accessibility

WAI-ARIA

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