クラス IgxStepComponent

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

igxmodule

IgxStepperModule

igxkeywords

step

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

階層

  • ToggleAnimationPlayer
    • IgxStepComponent

実装

  • IgxStep
  • AfterViewInit
  • OnDestroy
  • IgxSlideComponentBase

Index

コンストラクタ

  • new IgxStepComponent(stepper: IgxStepper, cdr: ChangeDetectorRef, renderer: Renderer2, platform: PlatformUtil, stepperService: IgxStepperService, builder: AnimationBuilder, 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 を取得/設定します。 Default value is "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

アクセサー

  • get active(): boolean
  • set active(value: boolean): void
  • get disabled(): boolean
  • set disabled(value: boolean): void
  • get index(): number
  • get isValid(): boolean
  • set isValid(value: boolean): void