Class IgxStepComponent

The IgxStepComponent は igx-stepper 要素内で使用され、各ステップのコンテンツを保持します。 カスタム インジケーター、タイトル、およびサブタイトルもサポートします。

Igx Module

IgxStepperModule

Igx Keywords

step

 <igx-stepper>
...
<igx-step [active]="true" [completed]="true">
...
</igx-step>
...
</igx-stepper>

階層

Hierarchy

  • ToggleAnimationPlayer
    • IgxStepComponent

実装

  • IgxStep
  • AfterViewInit
  • OnDestroy
  • IgxSlideComponentBase

コンストラクター

  • パラメーター

    • stepper: IgxStepper
    • cdr: ChangeDetectorRef
    • renderer: Renderer2
    • platform: PlatformUtil
    • stepperService: IgxStepperService
    • animationService: AnimationService
    • element: ElementRef<HTMLElement>
    • dir: IgxDirectionality

    返却 IgxStepComponent

プロパティ

activeChange: EventEmitter<boolean> = ...

ステップの 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))
cdr: ChangeDetectorRef
completed: boolean = false

ステップが完了したかどうかを取得または設定します。

備考

true に設定すると、以下のセパレーターは solid でスタイル設定されます。

<igx-stepper>
...
<igx-step [completed]="true"></igx-step>
...
</igx-stepper>
this.stepper.steps[1].completed = true;
id: string = ...

ステップ コンポーネントの id を取得または設定します。 デフォルト値は "igx-step-0" です。

<igx-step id="my-first-step"></igx-step>
const stepId = this.step.id;
optional: boolean = false

ステップがオプションかどうかを取得または設定します。

備考

ステッパーがリニア モードの場合、オプションのステップの有効性はデフォルト動作に影響しません。 オプションのステップが無効な場合、ユーザーは次のステップに移動できます。

<igx-step [optional]="true"></igx-step>
this.stepper.steps[1].optional = true;
renderer: Renderer2
stepper: IgxStepper

アクセサー