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

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

Angular Stepper の例

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

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

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

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

ng add igniteui-angular

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 {}

あるいは、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;
}

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>

静的ステップの作成

<igx-stepper>
    <igx-step> 
       <p igxStepTitle>Step 1</p>
    </igx-step>
    <igx-step> 
       <p igxStepTitle>Step 2</p>
    </igx-step>
</igx-stepper>

各ステップで、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>

ステッパーの向きの変更

公開された 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>

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

ステップ状態

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 に設定されている場合、ステッパーは次のステップに進む前に現在のオプションではないステップを有効にする必要があります。

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

Note

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

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

ステップ操作

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

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

Note

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

ステップのカスタマイズ

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

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

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

Full (フル)

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

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

end
start
bottom
top

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

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

Note

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

Indicator (インジケーター)

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

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

Title (タイトル)

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

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

Note

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

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

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>

Note

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

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 - 現在フォーカスされているステップをアクティブ化します。

Note

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

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

Angular Stepper のスタイル設定

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

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

@import '~igniteui-angular/lib/core/styles/themes/index';

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

$custom-stepper-theme: stepper-theme(
    $current-title-color: #351e65,
    $current-subtitle-color: #5f4691,
    $step-separator-style: "solid"
);

CSS 変数の使用

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

:host {
    @include css-vars($custom-stepper-theme);
}

テーマオーバーライドの使用

IE11 のような古いブラウザー用にコンポーネントのスタイルを設定するには、CSS 変数がサポートされていないため、別の方法を使用する必要があります。

コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化を解除する必要があります。カスタムテーマが他のコンポーネントに影響しないようにするには、::ng-deep の前に :host セレクターを含めるようにしてください。:

:host {
    ::ng-deep {
        @include stepper($custom-stepper-theme);    
    }
}

デモ

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

API リファレンス

その他のリソース

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

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

Angular Stepper の例

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

Angular Stepper の使用

ステッパーの宣言

ステッパーの向きの変更

ステップ状態

リニア ステッパー

Note

ステップ操作

Note

ステップのカスタマイズ

Note

Note

Note

Angular Stepper のアニメーション

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

Note

Angular Stepper のスタイル設定

CSS 変数の使用

テーマ オーバーライドの使用

デモ

API リファレンス

その他のリソース

テーマ設定

リニアステッパー

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

テーマオーバーライドの使用