ステップの active
プロパティが変更されたときに発生します。双方向バインディングに使用できます。
<igx-step [(active)]="this.isActive">
</igx-step>
const step: IgxStepComponent = this.stepper.step[0];
step.activeChange.subscribe((e: boolean) => console.log("Step active state change to ", e))
ステップが完了したかどうかを取得または設定します。
true
に設定すると、以下のセパレーターは solid
でスタイル設定されます。
<igx-stepper>
...
<igx-step [completed]="true"></igx-step>
...
</igx-stepper>
this.stepper.steps[1].completed = true;
ステップ コンポーネントの id
を取得/設定します。
デフォルト値は "igx-step-0"
です。
<igx-step id="my-first-step"></igx-step>
const stepId = this.step.id;
ステップがオプションかどうかを取得/設定します。
ステッパーがリニア モードの場合、オプションのステップの有効性はデフォルト動作に影響しません。 オプションのステップが無効な場合、ユーザーは次のステップに移動できます。
<igx-step [optional]="true"></igx-step>
this.stepper.steps[1].optional = true;
ステップのアクティブ状態を取得または設定します。
<igx-step [active]="true"></igx-step>
this.stepper.steps[1].active = true;
ステップが操作可能かどうかを取得/設定します。
<igx-stepper>
...
<igx-step [disabled]="true"></igx-step>
...
</igx-stepper>
this.stepper.steps[1].disabled = true;
ステッパー内のステップ インデックスを取得します。
const step = this.stepper.steps[1];
const stepIndex: number = step.index;
ステップが操作可能かどうかを取得/設定します。
<igx-step [isValid]="form.form.valid">
...
<div igxStepContent>
<form #form="ngForm">
...
</form>
</div>
</igx-step>
IgxStepComponent は
igx-stepper
要素内で使用され、各ステップのコンテンツを保持します。 カスタム インジケーター、タイトル、およびサブタイトルもサポートします。Igx Module
IgxStepperModule
Igx Keywords
step
Example