Steps ステップ

ユーザーを段階的なフローに沿って導きます。水平/垂直方向、クリック可能なナビゲーションと状態の上書きをサポートします。

ステップ

<template>
  <div class="demo-col" style="max-width: 680px; gap: 28px">
    <LhSteps :current="current">
      <LhStep title="採集" description="高精細スキャンで収録" />
      <LhStep title="色補正" description="色値の基準との照合" />
      <LhStep title="審校" description="専門家の複査" />
      <LhStep title="公開" description="デジタル展示室の公開" />
    </LhSteps>
    <div class="demo-row" style="gap: 12px">
      <LhButton size="small" :disabled="current === 0" @click="current--">前のステップ</LhButton>
      <LhButton size="small" type="primary" :disabled="current === 3" @click="current++">次のステップ</LhButton>
    </div>
    <LhSteps :current="2" direction="vertical">
      <LhStep title="採集" description="完了" />
      <LhStep title="色補正" description="完了" />
      <LhStep title="審校" description="進行中" />
      <LhStep title="公開" description="待機中" />
    </LhSteps>
    <LhSteps :current="1" status="error" :clickable="true" @click="onStepClick">
      <LhStep title="第一ステップ" />
      <LhStep title="エラーのステップ" icon="lh-icon-user" />
      <LhStep title="第三ステップ" />
    </LhSteps>
    <p class="demo-note">clickable でクリックナビゲーション、status="error" が全体の状態を上書き、icon でアイコンを指定。</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    current: 1,
  }),
  methods: {
    onStepClick(index) {
      this.current = index
    },
  },
}
</script>

Steps Props

プロパティ	説明	型	デフォルト値
current	現在のステップのインデックス（:current.sync、イベント名 update:current、0 から）	number	0
direction	方向	'horizontal' \| 'vertical'	'horizontal'
clickable	ステップをクリックしてナビゲーションできるかどうか	boolean	false
status	すべてのステップの状態を上書き（カスタム表示用）	'wait' \| 'process' \| 'finish' \| 'error'	—
sx	sx によるレイアウト省略記法	—	—

Step Props

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

Events

イベント	説明	コールバックパラメータ
click	ステップ項目のクリック（clickable の有効化が必要）	(インデックス)