Ignite UI for Angular

すべて
  • パブリック
  • パブリック/保護
  • すべて

クラス 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

コンストラクタ

プロパティ

アクセサー

メソッド

コンストラクタ

constructor

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

プロパティ

activeStepChanged

activeStepChanged: EventEmitter<IStepChangedEventArgs> = ...

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

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

activeStepChanging

activeStepChanging: EventEmitter<IStepChangingEventArgs> = ...

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

<igx-stepper (activeStepChanging)="handleActiveStepChanging($event)">
</igx-stepper>

public handleActiveStepChanging(event: IStepChangingEventArgs) {
 if (event.newIndex < event.oldIndex) {
     event.cancel = true;
 }
}

contentTop

contentTop: boolean = false

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

備考:

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

this.stepper.contentTop = true;

stepType

stepType: IgxStepType = IgxStepType.Full

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

this.stepper.stepType = IgxStepType.Indicator;

titlePosition

titlePosition: IgxStepperTitlePosition = null

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

備考:

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

this.stepper.titlePosition = IgxStepperTitlePosition.Top;

アクセサー

animationDuration

  • get animationDuration(): number
  • set animationDuration(value: number): void

horizontalAnimationType

linear

  • get linear(): boolean
  • set linear(value: boolean): void

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

    備考:

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

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

    返却 boolean

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

    備考:

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

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

    パラメーター

    • value: boolean

    返却 void

orientation

steps

verticalAnimationType

メソッド

navigateTo

  • navigateTo(index: number): void

next

  • next(): void

prev

  • prev(): void

reset

  • reset(): void