アクティブなステップが変更されたときに発生します。
<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>
IgxStepper は、コンテンツを論理ステップに分割することにより、ウィザードのようなワークフローを提供します。
Igx Module
IgxStepperModule
Igx Keywords
stepper
Igx Group
レイアウト
備考
Ignite UI for Angular Stepper コンポーネントを使用すると、複数のステップ間を移動できます。 水平方向と垂直方向、およびキーボード ナビゲーションをサポートし、アクティブなステップを制御する API メソッドを提供します。 このコンポーネントは、アクティブなステップを制御するキーボード ナビゲーションと API を提供します。
例