Angular Stepper (ステッパー) コンポーネントの概要

    Ignite UI for Angular Stepper は高度にカスタマイズ可能なコンポーネントで、必要なプロセスを可視化し、進行状況を各ステップで表示します。垂直線または水平線で表示されます。Ignite UI for Angular コンポーネント ライブラリによって提供されるステッパー コンポーネントは、ウィザードのようなワークフローと、ステップ検証、スタイル設定、向き、キーボード ナビゲーションなどの複数の機能を提供します。

    Angular Stepper の例

    この Angular Stepper の例では、クレジット カードをカスタマイズでき、カード タイプの選択、ビジネス情報の追加、個人情報の入力、出荷の詳細の提供、確認の 5 つの論理ステップでプロセスを実行します。 Angular ステッパー デモの 4 番目のステップは、2 番目のステップでユーザーがチェックボックスにチェックを付けた場合にのみ有効になります。

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

    このサンプルが気に入りましたか? 完全な Ignite UI for Angularツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

    これは、Angular Reactive Forms を使用して上記の機能を実現する方法を示すサンプルです。

    EXAMPLE

    Ignite UI for Angular Stepper を使用した作業の開始

    Ignite UI for Angular Stepper コンポーネントを初期化するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。

    ng add igniteui-angular
cmd

    Ignite UI for Angular については、「はじめに」トピックをご覧ください。

    次に、app.module ファイルに IgxStepperModule をインポートします。

    // app.module.ts

...
import { IgxStepperModule } from 'igniteui-angular';
// import { IgxStepperModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxStepperModule],
    ...
})
export class AppModule {}
typescript

    あるいは、16.0.0 以降、IgxStepperComponent をスタンドアロンの依存関係としてインポートすることも、IGX_STEPPER_DIRECTIVES トークンを使用してコンポーネントとそのすべてのサポート コンポーネントおよびディレクティブをインポートすることもできます。

    // home.component.ts

import { HammerModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { IGX_STEPPER_DIRECTIVES } from 'igniteui-angular';
// import { IGX_STEPPER_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `<igx-stepper>
        <igx-step> 
            <p igxStepTitle>Step 1</p>
        </igx-step>
        <igx-step> 
            <p igxStepTitle>Step 2</p>
        </igx-step>
    </igx-stepper>`,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_STEPPER_DIRECTIVES, FormsModule, HammerModule]
    /* or imports: [IgxStepperComponent, FormsModule, HammerModule] */
})
export class HomeComponent {
    public task: Task;
}
typescript

    Angular Stepper モジュールまたはディレクティブをインポート後、igx-stepper とそのステップの基本設定を開始します。

    Angular Stepper の使用

    IgxStepComponent は、IgxStepperComponent に属するすべてのステップの表現です。ステップは isValid、active、optional、disabled、completed プロパティを提供し、ビジネス要件に応じてステップの状態を構成できます。

    ステッパーの宣言

    ステッパー モジュールをインポートした後で、構成を開始します。

    ステップは、以下の方法のいずれかを使用して宣言できます。

    • データセットの繰り返し
    <igx-stepper>
    <igx-step *ngFor="let step of stepsData" [disabled]=”step.disabled”>
        <igx-icon igxStepIndicator>
			{{step.indicator}}
        </igx-icon>

        <p igxStepTitle>
			{{step.title}}
        </p>
    </igx-step>
</igx-stepper>
html
    • 静的ステップの作成
    <igx-stepper>
    <igx-step> 
       <p igxStepTitle>Step 1</p>
    </igx-step>
    <igx-step> 
       <p igxStepTitle>Step 2</p>
    </igx-step>
</igx-stepper>
html

    各ステップで、igxStepIndicator、igxStepTitle、igxStepSubtitle、および igxStepContent ディレクティブを使用してインジケーター、タイトル、サブタイトル、コンテンツを構成できます。

    <igx-stepper>
    <igx-step>
       <igx-icon igxStepIndicator>home</igx-icon>
       <p igxStepTitle>Home</p>
       <p igxStepSubtitle>Home Sub Title</p>
       <div igxStepContent>
          ...
       </div>
    </igx-step>
</igx-stepper>
html

    ステッパーの向きの変更

    公開された orientation プロパティでステッパーの向きをカスタマイズできます。IgxStepperOrientation 列挙型の Horizontal メンバー (デフォルト値) または Vertical メンバーを取得します。

    水平方向のステッパー

    igx-stepper の orientation プロパティのデフォルト値は horizontal です。 ステッパーが水平方向の場合、ステップのコンテンツをステップのヘッダーの上または下に表示するかどうかを決定できます。これは、IgxStepperComponent の contentTop ブール型プロパティを設定することで実現できます。デフォルト値は false です。有効な場合、ステップのコンテンツはステップのヘッダーの上に表示されます。

    水平方向のステッパー

    水平レイアウトから垂直レイアウトに簡単に切り替えることができます。デフォルトの方向を変更するには、orientation プロパティを vertical に設定します。

    <igx-stepper [orientation]="'vertical'">
	<igx-step>    
  		…   
	</igx-step>

	<igx-step>    
 		 …   
	</igx-step>
</igx-stepper>
html

    以下のサンプルは、実行時にステッパーの向きとタイトルの位置を変更する方法を示しています。

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

    ステップ状態

    IgxStepperComponent は 4 つのステップ状態をサポートし、それぞれがデフォルトで異なるスタイルを適用します。

    • active - ステップが現在表示されているかどうかを決定します。設計上、ユーザーが明示的にステップの active 属性を true に設定しない場合、最初の有効なステップがアクティブになります。
    • disabled - ステップが操作可能かどうかを決定します。デフォルトでは、ステップの disabled 属性は false に設定されています。
    • optional - デフォルトで、ステップの optional 属性は false に設定されます。リニア ステッパーのステップの有効性が必要ない場合、オプションの属性を有効にして、ステップの有効性とは関係なく前進できます。
    • completed - デフォルトでは、ステップの completed 属性は false を返します。ユーザーは、completed 属性を必要に応じて設定することにより、このデフォルトの completed 動作をオーバーライドできます。ステップが完了済みとしてマークされると、ステップ ヘッダーのスタイルがデフォルトで変更されるだけでなく、完了したステップと次のステップの間の進捗線のスタイルも変更されます。両方のスタイルは、公開された CSS 変数を使用して変更できます。

    IgxStepperComponent は、双方向バインド可能な isValid プロパティで各ステップの検証ロジックを設定できます。その値に基づいて、ユーザーがリニア ステッパー モードで前に進むことができるかどうかが決定されます。 デフォルトで、ステップの isValid プロパティは true に設定されます。

    リニア ステッパー

    igx-stepper は、linear プロパティを使用してステップ フローを設定できます。デフォルトで、linear は false に設定され、ユーザーは IgxStepperComponent で無効にされていないステップを選択できます。

    linear プロパティが true に設定されている場合、ステッパーは次のステップに進む前に現在のオプションではないステップを有効にする必要があります。

    現在のオプションではないステップが有効でない場合、現在のステップを検証するまで次のステップに進むことができません。

    オプションのステップの有効性は考慮されません。

    以下の例は、リニア ステッパーを構成する方法を示しています。

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

    ステップ操作

    IgxStepperComponent は、ステップ操作に以下の API メソッドを提供します。

    • navigateTo – 指定したインデックスでステップをアクティブ化します。
    • next - 次の無効化されていないステップをアクティブ化します。
    • prev – 前の無効化されていないステップをアクティブ化します。
    • reset – ステッパーを初期状態にリセットします。

    reset メソッドはステップの内容をクリアしません。これは手動で行う必要があります。

    ステップのカスタマイズ

    Ignite UI for Angular Stepper では、タイトル、インジケーターなどのさまざまなオプションを構成できます。

    これは、IgxStepperComponent の stepType プロパティで実現できます。IgxStepType 列挙型のメンバーを取得します。

    • Full (フル、デフォルト値)
    • Indicator (インジケーター)
    • Title (タイトル)

    Full (フル)

    タイトルとサブタイトルが定義されている場合、この設定ではインジケーターとタイトルの両方が描画されます。

    また、ユーザーはステップのタイトルの位置を定義できるため、ステップ インジケーターの前、後、上、または下に配置できます。 ユーザーは titlePosition プロパティを使用してタイトル位置を構成できます。両方のプロパティは IgxStepperTitlePosition 列挙型のメンバーを取得します。

    • end
    • start
    • bottom
    • top

    igx-stepper が水平方向の場合、タイトル位置のデフォルト値は bottom です。

    向きが垂直レイアウトに設定されている場合、タイトル位置のデフォルト値は end です。

    titlePosition プロパティは、ステッパーの stepType プロパティが full に設定されている場合にのみ適用できます。

    Indicator (インジケーター)

    ステップのインジケーターのみを表示する場合は、stepType オプションを indicator に設定します。

    ステップ インジケーターはすべてのコンテンツをサポートしますが、サイズが常に 24 ピクセルになるという制限があります。この点に注意して、ステップ インジケーターとして IgxIconComponent または IgxAvatarComponent を使用することをお勧めします。

    Title (タイトル)

    ステップのタイトルのみを表示する場合は、stepType オプションを title に設定します。

    このように、サブタイトルが定義されている場合、それらもステップ タイトルの下に描画されます。

    このコンテナーは、サイズ制限なしで要件に応じて再テンプレート化できます。たとえば、サイズが 24 ピクセルより大きいインジケーターを中に追加できます。

    以下のサンプルは公開されたすべてのステップ タイプと変更方法を示しています。

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

    IgxStepperComponent では、アクティブなステップ、無効なステップ、完了したステップの描画されたインジケーターをカスタマイズできます。これは、igxStepActiveIndicator、igxStepInvalidIndicator、および igxStepCompletedIndicator ディレクティブで実現できます。

    <igx-stepper>
    <ng-template igxStepActiveIndicator>
       <igx-icon>edit</igx-icon>
    </ng-template>

    <ng-template igxStepInvalidIndicator>
       <igx-icon>error</igx-icon>
    </ng-template>

    <ng-template igxStepCompletedIndicator>
       <igx-icon>check</igx-icon>
    </ng-template>
    ...
</igx-stepper>
html

    このテンプレートは、関連する状態のすべてのステップに適用されます。

    Angular Stepper のアニメーション

    Angular Stepper のアニメーションにより、エンドユーザーは定義されたステッをプ操作しているときに高いエクスペリエンスを得ることができます。使用可能なアニメーション オプションは、ステッパーの向きによって異なります。

    ステッパーが水平方向の場合、デフォルトで slide アニメーションを使用するように構成されます。fade もサポートします。アニメーションは、horizontalAnimationType 入力を介して構成されます。

    垂直方向のレイアウトでは、アニメーション タイプは verticalAnimationType プロパティを使用して定義できます。デフォルトで値は grow で、ユーザーは fade に設定できます。

    両方のアニメーション タイプ入力に none を設定すると、ステッパー アニメーションが無効になります。

    IgxStepperComponent は、ステップ間のトランジションの期間を構成する機能を提供します。これは、引数として数値を受け取る animationDuration プロパティで実現できます。これは両方の方向に共通です。

    キーボード ナビゲーション

    Ignite UI for Angular は、さまざまなキーボード操作をエンドユーザーに提供します。この機能はデフォルトで有効になっており、エンドユーザーは簡単にステップを移動できます。 IgxStepperComponent ナビゲーションは W3 アクセシビリティ標準に準拠しており、便利に使用できます。

    キーの組み合わせ

    • Tab - 次の移動可能な要素にフォーカスを移動します。
    • Shift + Tab - 前移動可能な要素にフォーカスを移動します。
    • 下矢印 - igx-stepper が垂直方向の場合、次のアクセス可能なステップのヘッダーにフォーカスを移動します。
    • 上矢印 - igx-stepper が垂直方向の場合、前のアクセス可能なステップのヘッダーにフォーカスを移動します。
    • 左矢印 - 両方の方向で前のアクセス可能なステップのヘッダーにフォーカスを移動します。
    • 右矢印 - 両方の方向で次にアクセス可能なステップのヘッダーにフォーカスを移動します。
    • Home - igx-stepper の最初の有効なステップのヘッダーにフォーカスを移動します。
    • End - igx-stepper の最後の有効なステップのヘッダーにフォーカスを移動します。
    • Enter / Space - 現在フォーカスされているステップをアクティブ化します。

    ユーザーがステップ ヘッダーで Tab キーを押すと、フォーカスはステップ コンテンツ コンテナーに移動します。コンテナーをスキップする場合、開発者は [tabIndex]="-1" コンテンツ コンテナーを設定する必要があります。

    Stepper コンポーネントは、ローコード ドラッグアンドドロップ App Builder™ でも使用できます。

    App Builder | CTA Banner

    Angular Stepper のスタイル設定

    Ignite UI for Angular テーマを使用して、igx-stepper の外観を変更できます。

    はじめに、テーマ エンジンによって公開されている関数を使用するために、スタイル ファイルに index ファイルをインポートする必要があります。

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
scss

    最も簡単な方法として、stepper-theme を拡張する新しいテーマを作成し、変更するパラメーターを渡す方法があります。

    $custom-stepper-theme: stepper-theme(
  $indicator-background: #fff,

  $current-indicator-background: #f6cd28,
  $current-indicator-outline: #351e65,

  $current-title-color: #351e65,
  $current-subtitle-color: #5f4691,

  $complete-indicator-background: #351e65,
  $complete-indicator-outline: #351e65,

  $complete-title-color: red,
  $complete-subtitle-color: #5f4691,

  $border-radius-step-header: 16px,
  $border-radius-indicator: 10px 4px 10px 4px,

  $step-separator-color: #f6cd28,
  $complete-step-separator-color: #351e65,
);
scss

    最後にコンポーネントのテーマを含めます。

    @include css-vars($custom-stepper-theme);
scss

    デモ

    以下のサンプルは、Ignite UI for Angular テーマで適用されるシンプルなスタイル設定を示します。

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

    API リファレンス

    その他のリソース

    コミュニティに参加して新しいアイデアをご提案ください。