Steps ステップ

プロセスの手順を示すインジケーター：現在 / 完了 / 待機 / エラーの 4 状態、水平 / 垂直方向、クリックナビゲーションも選択可能。水平ステップは固定幅の基準値に従って自動的に折り返し、タイトルは常に 1 行で表示されます。

基本的な使い方

基本的な使い方

1. ✓
   墨を磨る
2. 2
   筆を下ろす
3. 3
   落款を押す

<script setup lang="ts">
</script>

<template>
  <LhSteps :current="1">
    <LhStep title="墨を磨る" />
    <LhStep title="筆を下ろす" />
    <LhStep title="落款を押す" />
  </LhSteps>
</template>

<script>
export default {}
</script>

<template>
  <LhSteps :current="1">
    <LhStep title="墨を磨る" />
    <LhStep title="筆を下ろす" />
    <LhStep title="落款を押す" />
  </LhSteps>
</template>

説明付き

説明付き

1. ✓
   登録

   基本情報を入力
2. 2
   認証

   メールとスマートフォンの認証
3. 3
   開通

   アカウント権限を有効化

<script setup lang="ts">
</script>

<template>
  <LhSteps :current="1">
    <LhStep title="登録" description="基本情報を入力" />
    <LhStep title="認証" description="メールとスマートフォンの認証" />
    <LhStep title="開通" description="アカウント権限を有効化" />
  </LhSteps>
</template>

<script>
export default {}
</script>

<template>
  <LhSteps :current="1">
    <LhStep title="登録" description="基本情報を入力" />
    <LhStep title="認証" description="メールとスマートフォンの認証" />
    <LhStep title="開通" description="アカウント権限を有効化" />
  </LhSteps>
</template>

icon でステップにカスタムアイコンを指定します（内蔵 LhIcon のアイコン名（user/check/star など）を指定）。未指定の場合、完了 / エラーにはチェックとバツ記号が表示され、それ以外には連番が表示されます。アイコンのレンダリングを完全にカスタマイズしたい場合は #icon スロットで上書きできます。

カスタムアイコン

1. 登録
2. 認証
3. 開通

<script setup lang="ts">
</script>

<template>
  <LhSteps :current="1">
    <LhStep icon="user" title="登録" />
    <LhStep icon="check" title="認証" />
    <LhStep icon="star" title="開通" />
  </LhSteps>
</template>

<script>
export default {}
</script>

<template>
  <LhSteps :current="1">
    <LhStep icon="user" title="登録" />
    <LhStep icon="check" title="認証" />
    <LhStep icon="star" title="開通" />
  </LhSteps>
</template>

エラー状態

エラー状態

1. ✕
   アップロード
2. ✕
   検証
3. ✕
   完了

<script setup lang="ts">
</script>

<template>
  <LhSteps :current="1" status="error">
    <LhStep title="アップロード" />
    <LhStep title="検証" />
    <LhStep title="完了" />
  </LhSteps>
</template>

<script>
export default {}
</script>

<template>
  <LhSteps :current="1" status="error">
    <LhStep title="アップロード" />
    <LhStep title="検証" />
    <LhStep title="完了" />
  </LhSteps>
</template>

status は全体上書きです。設定するとすべてのステップがその状態になり、カスタム表示に適しています。

クリックナビゲーション

クリックナビゲーション

1. 原稿選び

   底本を吟味する
2. 臨模

   対臨または背臨
3. 3
   表装

   壁に掛けて表装する

現在のステップ：1

<script setup lang="ts">
import { ref } from 'vue'
const current = ref(1)
</script>

<template>
  <LhSteps v-model:current="current" clickable>
    <LhStep title="原稿選び" description="底本を吟味する" />
    <LhStep title="臨模" description="対臨または背臨" />
    <LhStep title="表装" description="壁に掛けて表装する" />
  </LhSteps>
</template>

<script>
export default {
  data() {
    return { current: 1 }
  },
}
</script>

<template>
  <LhSteps v-model:current="current" clickable>
    <LhStep title="原稿選び" description="底本を吟味する" />
    <LhStep title="臨模" description="対臨または背臨" />
    <LhStep title="表装" description="壁に掛けて表装する" />
  </LhSteps>
</template>

垂直方向

垂直方向

1. ✓
   起

   起勢は蔵鋒
2. 2
   行

   行筆は中鋒
3. 3
   収

   収筆は回鋒

<script setup lang="ts">
</script>

<template>
  <LhSteps :current="1" direction="vertical">
    <LhStep title="起" description="起勢は蔵鋒" />
    <LhStep title="行" description="行筆は中鋒" />
    <LhStep title="収" description="収筆は回鋒" />
  </LhSteps>
</template>

<script>
export default {}
</script>

<template>
  <LhSteps :current="1" direction="vertical">
    <LhStep title="起" description="起勢は蔵鋒" />
    <LhStep title="行" description="行筆は中鋒" />
    <LhStep title="収" description="収筆は回鋒" />
  </LhSteps>
</template>

固定幅折り返し

水平ステップは --lh-steps-item-basis（デフォルト 160px）の基準幅で配置されます。コンテナに収まれば各ステップを 1 行に等分し、収まなければステップ単位で次の行へ折り返し、タイトルを複数行に押し込むことはありません。タイトルは常に 1 行表示で、長すぎる場合は省略記号で切り詰められます。折り返し後、行末ステップの接続線は自動的に非表示になり、行末の空白を指すことはありません。

固定幅折り返し

1. ✓
   原稿選び

   底本を吟味する
2. 2
   臨模

   対臨または背臨
3. 3
   題跋

   款を書き印を押す
4. 4
   表装

   壁に掛けて表装する

<script setup lang="ts">
</script>

<template>
  <LhSteps :current="1">
    <LhStep title="原稿選び" description="底本を吟味する" />
    <LhStep title="臨模" description="対臨または背臨" />
    <LhStep title="題跋" description="款を書き印を押す" />
    <LhStep title="表装" description="壁に掛けて表装する" />
  </LhSteps>
</template>

<script>
export default {}
</script>

<template>
  <LhSteps :current="1">
    <LhStep title="原稿選び" description="底本を吟味する" />
    <LhStep title="臨模" description="対臨または背臨" />
    <LhStep title="題跋" description="款を書き印を押す" />
    <LhStep title="表装" description="壁に掛けて表装する" />
  </LhSteps>
</template>

上記の例ではコンテナの幅を 280px に制限して折り返しを演示しています。折り返しのタイミングを変えたい場合は、themeVars で steps-item-basis を上書きします（キーに自動的に --lh- プレフィックスが付きます）：<LhSteps :theme-vars="{ 'steps-item-basis': '220px' }">。LhConfigProvider の componentTheme.steps でグローバルに設定することも可能です。

Steps API

LhSteps Props

プロパティ名	説明	型	デフォルト値
current	現在のステップのインデックス（v-model:current、0 始まり）	number	0
direction	方向	"horizontal" | "vertical"	'horizontal'
clickable	ステップをクリックしてナビゲーションできるか	boolean	false
status	すべてのステップの状態を全体上書きする（カスタム表示用）	"wait" | "process" | "finish" | "error"	—
themeVars	コンポーネントレベルのテーマ変数（キーに自動的に --lh- プレフィックスが付く）	{ [x: string]: string; }	—
sx	sx クイックレイアウトプロパティ	LhSxProps	—

LhSteps Events

イベント名	説明	コールバック引数
update:current	現在のステップの変化（v-model）	(index: number)
change	現在のステップの変化	(index: number)

LhStep Props

プロパティ名	説明	型	デフォルト値
title	ステップのタイトル（title スロットも使用可）	string	''
description	ステップの説明（description スロットも使用可）	string	''
icon	カスタムアイコン名（内蔵 LhIcon アイコン。未指定時は finish/error にチェックとバツ記号、それ以外は連番を表示）	LhIconName	—

Slots

スロット名	説明	対象コンポーネント
default	ステップ項目（LhStep のリスト）	LhSteps
title	タイトルをカスタマイズ	LhStep
description	説明をカスタマイズ	LhStep
icon	アイコンをカスタマイズ（icon prop のデフォルトレンダリングを上書き）	LhStep

コンポーネントレベル変数

以下の CSS 変数は .lh-steps にデフォルト値が定義されており、themeVars でグローバルまたはコンポーネントレベルの上書きが可能です（キーに自動的に --lh- プレフィックスが付きます）：

変数名	説明	デフォルト値
--lh-steps-item-basis	水平ステップ項目の固定基準幅。コンテナに収まらない場合はこの幅で折り返す	160px

アクセシビリティ

• コンテナは <ol role="list">。セマンティックな順序がそのままプロセスの順序になる
• 現在のステップには自動的に aria-current="step" が設定される
• clickable のとき、完了 / 現在のステップのヘッダーは本物の <button> で、aria-label は言語パックを参照する（steps.finish / steps.error / steps.step）。待機中のステップはクリックできず、ユーザーが未到達の段階をスキップするのを防ぐ
• 接続線は擬似要素で描画されるため、アクセシビリティツリーには入らない

型定義

本コンポーネントが外部にエクスポートする TypeScript 型構造は以下のとおりです（packages/components/steps/src/types.ts および @lh-ui/share/core/* ソースから自動抽出。各エントリをクリックすると完全な定義を確認できます。プロパティの説明は上記の Props 表を参照してください）：

LhStepsProps

export interface LhStepsProps {
  /** 現在のステップのインデックス（v-model:current、0 始まり） */
  current?: number
  /** 方向 */
  direction?: LhStepsDirection
  /** ステップをクリックしてナビゲーションできるか */
  clickable?: boolean
  /** すべてのステップの状態を全体上書きする（カスタム表示用） */
  status?: LhStepStatus
  /** コンポーネントレベルのテーマ変数（キーに自動的に --lh- プレフィックスが付く。例：`steps-item-basis`） */
  themeVars?: Record<string, string>
  /** sx クイックレイアウトプロパティ */
  sx?: LhSxProps
}

LhStepProps

export interface LhStepProps {
  /** ステップのタイトル（title スロットも使用可） */
  title?: string
  /** ステップの説明（description スロットも使用可） */
  description?: string
  /** カスタムアイコン名（未指定時は finish/error にチェックとバツ記号、それ以外は連番を表示） */
  icon?: LhIconName
}

LhIconName _{（@lh-ui/share/core/icon (svgs.ts) から）}

export type LhIconName = keyof typeof LH_ICON_SVGS_CONST

LhStepsDirection _{（@lh-ui/share/core/steps から）}

/**
 * ステップの方向
 */
export type LhStepsDirection = 'horizontal' | 'vertical'

LhStepStatus _{（@lh-ui/share/core/steps から）}

/**
 * ステップの状態
 */
export type LhStepStatus = 'wait' | 'process' | 'finish' | 'error'