クラス IgxStepperComponent

IgxStepper は、コンテンツを論理ステップに分割することにより、ウィザードのようなワークフローを提供します。

igxmodule

IgxStepperModule

igxkeywords

stepper

igxgroup

Layouts

備考:

Ignite UI for Angular Stepper コンポーネントを使用すると、複数のステップ間を移動できます。 水平方向と垂直方向、およびキーボード ナビゲーションをサポートし、アクティブなステップを制御する API メソッドを提供します。 このコンポーネントは、アクティブなステップを制御するキーボード ナビゲーションと API を提供します。

例:
<igx-stepper>
<igx-step [active]="true">
<igx-icon igxStepIndicator>home</igx-icon>
<p igxStepTitle>Home</p>
<div igxStepContent>
...
</div>
</igx-step>
<igx-step [optional]="true">
<div igxStepContent>
...
</div>
</igx-step>
<igx-step>
<div igxStepContent>
...
</div>
</igx-step>
</igx-stepper>

階層

  • IgxCarouselComponentBase
    • IgxStepperComponent

実装

  • IgxStepper
  • OnChanges
  • OnInit
  • AfterContentInit
  • OnDestroy

Index

コンストラクタ

  • new IgxStepperComponent(cdr: ChangeDetectorRef, animBuilder: AnimationBuilder, stepperService: IgxStepperService, element: ElementRef<HTMLElement>): IgxStepperComponent

プロパティ

activeStepChanged: EventEmitter<IStepChangedEventArgs> = ...

アクティブなステップが変更されたときに発生します。

例:
<igx-stepper (activeStepChanged)="handleActiveStepChanged($event)"></igx-stepper>
activeStepChanging: EventEmitter<IStepChangingEventArgs> = ...

ステッパーのアクティブなステップが変更しているときに発生します。

<igx-stepper (activeStepChanging)="handleActiveStepChanging($event)">
</igx-stepper>
public handleActiveStepChanging(event: IStepChangingEventArgs) {
if (event.newIndex < event.oldIndex) {
event.cancel = true;
}
}
contentTop: boolean = false

コンテンツがステップの上に表示されるかどうかを取得または設定します。

備考:

デフォルト値は false で、コンテンツはステップの下にあります。

this.stepper.contentTop = true;
stepType: IgxStepType = IgxStepType.Full

ステップが操作可能かどうかを取得/設定します。

this.stepper.stepType = IgxStepType.Indicator;
titlePosition: IgxStepperTitlePosition = null

ステップのタイトルの位置を取得または設定します。

備考:

ステッパーが水平方向のデフォルト値は bottom です。 垂直レイアウトでは、デフォルトのタイトル位置は end です。

this.stepper.titlePosition = IgxStepperTitlePosition.Top;

アクセサー

  • get animationDuration(): number
  • set animationDuration(value: number): void
  • get linear(): boolean
  • set linear(value: boolean): void
  • ステッパーがリニアかどうかを取得/設定します。

    備考:

    ステッパーがリニア モードで、アクティブなステップのみが有効な場合、ユーザーは次のステップに進むことができます。

    <igx-stepper [linear]="true"></igx-stepper>
    

    返却 boolean

  • ステッパーがリニアかどうかを取得/設定します。

    備考:

    ステッパが線形モードで、アクティブなステップが有効な場合のみ、ユーザーは前に進むことができます。

    <igx-stepper [linear]="true"></igx-stepper>
    

    パラメーター

    • value: boolean

    返却 void

メソッド

  • navigateTo(index: number): void
  • next(): void
  • prev(): void
  • reset(): void