Steps ステップ

ユーザーがフローに沿ってタスクを完了するよう導きます。横方向 / 縦方向、クリック可能なナビゲーション、ステータス全体の上書きをサポートします。

基本的な使い方

下絵
構図と線を決める
暈染
墨色を層状にぼかす
設色
丹青の色を点染する
落款
署名と印章を押して完成

下絵
暈染
設色
ここはやり直しが必要です
落款

下絵
構図と線を決める
暈染
墨色を層状にぼかす
設色
落款

import { useState } from 'react'
import { LhSteps, LhStep } from '@lh-ui/react'

export default function Demo() {
  const [current, setCurrent] = useState(1)

  return (
    <LhSteps current={current} onChange={(index) => setCurrent(index)}>
      <LhStep title="下絵" description="構図と線画を確定する" />
      <LhStep title="暈染" description="墨色を層に分けて暈す" />
      <LhStep title="着彩" description="絵の具で色を差す" />
      <LhStep title="落款" description="署名と印章で仕上げる" />
    </LhSteps>
  )
}

Steps Props

プロパティ	説明	型	使用可能な値	デフォルト値
current	現在のステップのインデックス（0 から開始、制御）	`number`	—	—
defaultCurrent	現在のステップのデフォルト値（非制御）	`number`	—	`0`
direction	方向	`'horizontal' \| 'vertical'`	—	`'horizontal'`
clickable	ステップをクリックしてナビゲートできるかどうか	`boolean`	—	`false`
status	全ステップを上書きするステータス（カスタム表示に使用）	`'wait' \| 'process' \| 'finish' \| 'error'`	—	—
themeVars	コンポーネントレベルのテーマ変数（キーに自動的に `--lh-` 接頭辞を付加）	`Record<string, string>`	—	—
sx	クイックレイアウトプロパティ	`SxProps`	—	—

Step Props

プロパティ	説明	型	デフォルト値
title	ステップのタイトル	`ReactNode`	—
description	ステップの説明	`ReactNode`	—
icon	カスタムアイコン名（未指定時は finish / error にチェックとバツ、それ以外は序号を表示）	`LhIconName`	—

Steps イベント

イベント	説明	コールバックシグネチャ	Vue 対応
onChange	現在のステップの変化時に発火（`clickable` の時にのみ発火）	`(index: number) => void`	`@change`

制御 / 非制御

current を渡すと制御（コンポーネントは内部状態を持たない）。defaultCurrent を渡すと非制御の内部状態になります。どちらのモードでも onChange は発火します。

クリック可能な範囲

clickable が真の場合でも、「已完成」と「進行中」のステップのみが <button> として描画されます。未来のステップ（wait 状態）は常に <span> で、未到達のフローノードへジャンプするのを防ぎます —— lh-ui-plus と同じ挙動です。

子ノードの制限

children は直接 LhStep でなければなりません（.map での描画は可能）。カスタムコンポーネントでラップしてはいけません —— 親コンポーネントは Children.toArray で子要素の型を絞り込んでインデックスを注入しており、ラップするとインデックス注入に失敗し、状態計算が乱れます。

テーマ変数

themeVars のキーには自動的に --lh- 接頭辞が付加され、ルート要素のインラインスタイルに書き込まれます：

<LhSteps current={1} themeVars={{ 'steps-item-basis': '72px' }}>
  <LhStep title="下絵" />
  <LhStep title="暈染" />
</LhSteps>

アクセシビリティ

リストは <ol role="list"> です。現在のステップは aria-current="step" を出力し、各ステップの状態は aria-label（言語パック steps.step のテンプレート、例：「第 2 步」）と状態クラス名で共同表現されます。

ref

forwardRef<HTMLOListElement> —— <ol> ルート要素です。LhStep は HTMLLIElement を転送します。

スタイル

import '@lh-ui/react/theme.css'
import '@lh-ui/react/style/steps'

基本的な使い方​

Steps Props​

Step Props​

Steps イベント​

テーマ変数​

アクセシビリティ​

ref​

スタイル​