Steps ステップバー - Vant 4

Steps ステップバー

紹介

操作フローの各段階を表示し、現在の位置を明確にします。

取り込み

以下の方法でコンポーネントをグローバル登録します。詳細はコンポーネント登録を参照してください。

import { createApp } from'vue'; import { Step, Steps } from'vant'; const app = createApp(); app.use(Step); app.use(Steps);

🎯 コード例

📋 基本的な使い方

active で現在ステップを制御し、進捗を明確にします。インデックスは 0 開始です。

<template>
  <van-steps :active="active">
    <van-step>購入者の注文</van-step>
    <van-step>店舗の受注</van-step>
    <van-step>購入者の受け取り</van-step>
    <van-step>取引完了</van-step>
  </van-steps>
  
  <div class="demo-buttons">
    <van-button @click="nextStep" type="primary">次へ</van-button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const active = ref(1);
    
    const nextStep = () => {
      if (active.value < 3) {
        active.value++;
      }
    };
    
    return { 
      active,
      nextStep
    };
  },
};
</script>

<style>
.demo-buttons {
  margin-top: 20px;
  text-align: center;
}
</style>

🎨 スタイルのカスタマイズ

active-icon と active-color を使って独自のビジュアルに。ステップバーをブランドに合わせてカスタマイズできます。

<template>
  <van-steps 
    :active="active" 
    active-icon="success" 
    active-color="#38f"
  >
    <van-step>アカウント登録</van-step>
    <van-step>メール認証</van-step>
    <van-step>情報入力</van-step>
    <van-step>利用開始</van-step>
  </van-steps>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const active = ref(2);
    return { active };
  },
};
</script>

📱 縦方向ステップバー

direction="vertical" を設定して縦方向レイアウトに適応します。

<template>
  <van-steps 
    :active="active" 
    direction="vertical"
    active-color="#ff6034"
  >
    <van-step>
      <h3>注文確認</h3>
      <p>注文情報をご確認ください</p>
    </van-step>
    <van-step>
      <h3>支払い</h3>
      <p>支払い方法を選択して決済</p>
    </van-step>
    <van-step>
      <h3>発送</h3>
      <p>店舗が発送準備中</p>
    </van-step>
    <van-step>
      <h3>受け取り確認</h3>
      <p>受け取り後に確認してください</p>
    </van-step>
  </van-steps>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const active = ref(1);
    return { active };
  },
};
</script>

📋 API

🎛️ Steps Props

パラメータ	説明	型	デフォルト
active	📍 現在ステップのインデックス	*number	string*
direction	📐 方向（vertical を指定可能）	string	horizontal
active-icon	✅ 現在ステップのアイコン（Icon を参照）	string	checked
inactive-icon	⚪ 非アクティブステップのアイコン（Icon）	string	-
finish-icon	🏁 完了ステップのアイコン（inactive-icon より優先、Icon）	string	-
active-color	🎨 現在・完了ステップの色	string	#1989fa
inactive-color	🔘 未アクティブの色	string	#969799
icon-prefix	🏷️ アイコンクラス接頭辞（Icon の class-prefix）	string	van-icon

🎪 Step Slots

名前	説明
default	📝 ステップの内容
active-icon	✨ アクティブアイコンのカスタマイズ
inactive-icon	🔘 非アクティブアイコンのカスタマイズ
finish-icon	🎯 完了ステップのアイコン（inactive-icon より優先）

🎪 Steps Events

イベント名	説明	コールバック引数
click-step	👆 ステップのタイトルまたはアイコンのクリック時に発火	index: number

📘 型定義

コンポーネントは以下の型定義を提供します：

import type { StepsProps, StepsDirection } from 'vant';

🎨 テーマカスタマイズ

🎭 スタイル変数

コンポーネントは以下の CSS 変数を提供しており、スタイルのカスタマイズに使用できます。使用方法は ConfigProvider コンポーネント を参照してください。

名称	デフォルト	説明
--van-step-text-color	var(--van-text-color-2)	📝 テキスト色
--van-step-active-color	var(--van-primary-color)	✨ アクティブ色
--van-step-process-text-color	var(--van-text-color)	🔄 進行中のテキスト色
--van-step-font-size	var(--van-font-size-md)	🔤 文字サイズ
--van-step-line-color	var(--van-border-color)	📏 接続線の色
--van-step-finish-line-color	var(--van-primary-color)	🏁 完了線の色
--van-step-finish-text-color	var(--van-text-color)	✅ 完了テキスト色
--van-step-icon-size	12px	🔘 アイコンサイズ
--van-step-circle-size	5px	⭕ ドットサイズ
--van-step-circle-color	var(--van-gray-6)	🔘 ドット色
--van-step-horizontal-title-font-size	var(--van-font-size-sm)	📐 水平タイトル文字サイズ
--van-steps-background	var(--van-background-2)	🎨 背景色

🔗 関連ドキュメント

🧭 ナビゲーションコンポーネント

• NavBar ナビバー - 🧭 ページ上部のナビ
• Tab タブ - 📑 カテゴリ別の内容切り替え
• Tabbar タブバー - 📱 下部ナビゲーションバー
• Sidebar サイドバー - 📋 垂直表示のナビメニュー

📊 表示コンポーネント

• Progress 進捗バー - 📊 進捗の表示
• Circle 円形進捗 - ⭕ 円形の進捗バー
• NoticeBar 通知バー - 📢 メッセージ通知の表示

💬 フィードバックコンポーネント

• Toast トースト - 💬 画面中央の半透明通知
• Dialog ダイアログ - 📱 モーダルダイアログ
• Notify 通知 - 📨 ページ上部の通知

🛠️ ツールコンポーネント

• ConfigProvider グローバル設定 - ⚙️ ダークモードやテーマの一元設定