syncfusion-blazor-stepper

Syncfusion Blazor Stepper コンポーネントの実装

Blazor Stepper コンポーネントを使うと、複数ステップのプロセスを直感的にユーザーに案内できます。番号付きまたはラベル付きのステップで進捗状況を表示し、カスタマイズ可能なアニメーション、テンプレート、検証状態を使って、線形および非線形のワークフローに対応します。

このスキルを使用するタイミング

次のような場合に Stepper コンポーネントを使用します。

• 複数ステップのウィザードやワークフローを作成する
• 順次実行するタスクの進捗状況を表示する
• 検証機能付きのステップ形式のフォームを構築する
• チェックリスト形式のナビゲーションを実装する
• オンボーディングプロセスでユーザーを案内する
• 任意のステップと必須のステップを示す
• 次に進む前にステップの完了を検証する

コンポーネントの概要

Stepper は、設定可能なインジケーター、ラベル、テンプレートとともに、水平または垂直のレイアウトでステップを表示します。各ステップは次のようにカスタマイズできます。

• 視覚的な状態：未開始、進行中、完了、エラー
• ラベルとアイコン：カスタムテキストおよび CSS アイコンのクラス
• 検証：成功またはエラーのインジケーター
• テンプレート：高度なレイアウト用のカスタムコンテンツ
• アニメーション：ステップ間のスムーズな遷移

ドキュメントとナビゲーションガイド

API リファレンス

📄 参照： references/api-reference.md

• すべてのプロパティ、メソッド、イベントに関する完全な API ドキュメント
• 実装ガイドへの直接リンク付きのコンポーネントとプロパティの定義
• イベント引数のリファレンスと列挙型
• 完全なコンポーネント階層（SfStepper、StepperStep、StepperAnimationSettings）

はじめに

📄 参照： references/getting-started.md

• Blazor WebAssembly および Blazor Web App のインストールとパッケージのセットアップ
• サービス登録と名前空間のインポート
• アイコンとラベルを使用した基本的な Stepper の実装
• 最新の Web Apps 向けインタラクティブなレンダーモード
• テーマ設定と CSS のインポート

ステップの種類と設定

📄 参照： references/step-types.md

• ステップの種類（Default、Label、Indicator）
• ラベルの位置（Top、Bottom、Start、End）
• ステップのプロパティと属性
• 任意のステップと無効化されたステップ
• 線形ワークフローと非線形ワークフロー
• ステップ状態の管理

イベントとインタラクション

📄 参照： references/events.md

• イベントハンドラーとライフサイクル（Created、StepChanged、StepChanging、StepClicked、StepRendered）
• イベント引数とパラメーター
• 一般的なイベントパターン
• ステップの進行と検証の処理

テンプレートとカスタマイズ

📄 参照： references/templates-and-styling.md

• カスタムステップテンプレート
• テンプレートのコンテキストとプロパティ
• CSS によるスタイル設定とカスタマイズ
• 個々のステップ用の CssClass プロパティ
• テーマのカスタマイズと外観

高度な機能

📄 参照： references/advanced-features.md

• ステップの検証（IsValid プロパティと検証状態）
• 検証ワークフローの実装
• ツールチップのサポート（ShowTooltip プロパティとカスタムテンプレート）
• ステップコンテンツのテンプレートとカスタムレイアウト
• ステップ完了の追跡とエラー処理
• 条件に応じたステップ表示パターン

アニメーションとグローバリゼーション

📄 参照： references/animations-and-globalization.md

• アニメーション設定（Duration と Delay）
• アニメーションの有効化と無効化
• ローカライズのサポート
• RTL（右から左）への対応
• 多言語設定

方向とレイアウト

📄 参照： references/orientations-and-layouts.md

• 水平方向（デフォルト）
• 垂直方向
• 順次進行する線形フロー
• 自由にナビゲーションできる非線形フロー
• レスポンシブデザインのパターン
• モバイルおよびデスクトップのレイアウトに関する考慮事項

クイックスタートの例

@using Syncfusion.Blazor.Navigations

<SfStepper>
    <StepperSteps>
        <StepperStep Label="Cart" IconCss="sf-icon-cart"></StepperStep>
        <StepperStep Label="Address" IconCss="sf-icon-transport"></StepperStep>
        <StepperStep Label="Payment" IconCss="sf-icon-payment"></StepperStep>
        <StepperStep Label="Ordered" IconCss="sf-icon-success"></StepperStep>
    </StepperSteps>
</SfStepper>

一般的なパターン

線形ワークフロー

Linear プロパティを使用して順次進行を強制します。ユーザーは現在のステップを完了してから次のステップに進めます。

<SfStepper Linear="true">
    
</SfStepper>

アクティブステップの制御

ActiveStep プロパティを設定して、現在アクティブなステップ（0 始まり）を制御します。

<SfStepper ActiveStep="1">
    
</SfStepper>

ステップ変更の追跡

StepChanged イベントを処理して、ユーザーがステップ間を移動したときに応答します。

<SfStepper StepChanged="@OnStepChanged">
    
</SfStepper>

@code {
    private void OnStepChanged(StepperChangedEventArgs args)
    {
        // Handle step change
    }
}

検証状態

各ステップの IsValid プロパティを使用して、成功またはエラーの状態を表示します。

<StepperStep Label="Payment" IsValid="true"></StepperStep>
<StepperStep Label="Confirm" IsValid="false"></StepperStep>

主なプロパティ

プロパティ	型	目的
ActiveStep	int	現在アクティブなステップ（0 始まり）を設定します
LinearFlow	bool	ステップの順次進行を強制します
ReadOnly	bool	ステッパーへのユーザー操作を無効にします
StepType	StepperType	表示形式（Default、Label、Indicator）
Orientation	StepperOrientation	レイアウトの方向（Horizontal、Vertical）
LabelPosition	StepperLabelPosition	ラベルの配置（Top、Bottom、Start、End）

ステップのプロパティ：

• Label：ステップに表示するテキスト
• Text：代替のテキストコンテンツ
• IconCss：カスタムアイコン用の CSS クラス
• Disabled：ステップへの操作を無効にします
• Optional：ステップを任意として指定します
• IsValid：検証状態（true/false/null）を設定します
• Status：現在の状態（NotStarted、InProgress、Completed）
• CssClass：スタイル設定用のカスタム CSS クラス

よくあるユースケース

購入手続きのフロー：検証とエラー処理を行いながら、購入手順をユーザーに案内します。

フォームウィザード：複雑なフォームを、任意のセクションを含む管理しやすいステップに分割します。

オンボーディング：進捗を追跡しながら、新しいユーザー向けのステップ形式のチュートリアルを作成します。

セットアップウィザード：成功またはエラーの状態を示しながら、設定手順をユーザーに案内します。

タスクリスト：完了／未完了のインジケーターを使って、チェックリスト形式の進捗を表示します。