アクティブなステップが変更されたときに発生します。
<igx-stepper (activeStepChanged)="handleActiveStepChanged($event)"></igx-stepper>
ステッパーのアクティブなステップが変更しているときに発生します。
<igx-stepper (activeStepChanging)="handleActiveStepChanging($event)">
</igx-stepper>
public handleActiveStepChanging(event: IStepChangingEventArgs) {
if (event.newIndex < event.oldIndex) {
event.cancel = true;
}
}
コンテンツがステップの上に表示されるかどうかを取得または設定します。
デフォルト値は false で、コンテンツはステップの下にあります。
this.stepper.contentTop = true;
ステップのタイプを取得/設定します。
this.stepper.stepType = IgxStepType.Indicator;
ステップのタイトルの位置を取得または設定します。
ステッパーが水平方向のデフォルト値は bottom です。
垂直レイアウトでは、デフォルトのタイトル位置は end です。
this.stepper.titlePosition = IgxStepperTitlePosition.Top;
アニメーション期間を取得または設定します。
<igx-stepper [animationDuration]="500">
<igx-stepper>
方向が水平の場合のステッパーのアニメーション タイプを取得/設定します。
デフォルト値は grow です。その他の値は fade および none です。
<igx-stepper animationType="none">
<igx-stepper>
ステッパーがリニアかどうかを取得/設定します。
ステッパーがリニア モードで、アクティブなステップのみが有効な場合、ユーザーは次のステップに進むことができます。
<igx-stepper [linear]="true"></igx-stepper>
ステッパーの向きを取得/設定します。
this.stepper.orientation = IgxStepperOrientation.Vertical;
すべてのステップを実行します。
const steps: IgxStepComponent[] = this.stepper.steps;
方向が垂直の場合のステッパーのアニメーション タイプを取得/設定します。
デフォルト値は grow です。その他の値は fade および none です。
<igx-stepper verticalAnimationType="none">
<igx-stepper>
指定したインデックスにあるステップをアクティブ化します。
this.stepper.navigateTo(1);
IgxStepper は、コンテンツを論理ステップに分割することにより、ウィザードのようなワークフローを提供します。
Igx Module
IgxStepperModule
Igx Keywords
stepper
Igx Group
レイアウト
Remarks
Ignite UI for Angular Stepper コンポーネントを使用すると、複数のステップ間を移動できます。 水平方向と垂直方向、およびキーボード ナビゲーションをサポートし、アクティブなステップを制御する API メソッドを提供します。 このコンポーネントは、アクティブなステップを制御するキーボード ナビゲーションと API を提供します。
Example