Skip to content

Latest commit

 

History

History
123 lines (90 loc) · 6.55 KB

README.md

File metadata and controls

123 lines (90 loc) · 6.55 KB

IgxStepperComponent

Description

IgxStepperComponent is a collection of IgxStepComponents that delivers a wizard-like workflow:

A complete walkthrough of how to get started can be found here. The specification for the stepper can be found here

Usage

<igx-stepper>
   <igx-step *ngFor="let step of stepsData" [disabled]=”step.disabled”>
      <igx-icon igxStepIndicator>
	      {{step.indicator}}
	  </igx-icon>

      <p igxStepTitle>
	      {{step.title}}
	  </p>

      <div igxStepContent>
         ...
      </div>
    </igx-step>
</igx-stepper>

Keyboard Navigation

The keyboard can be used to navigate through all steps in the stpper.

Disabled steps are not counted as visible steps for the purpose of keyboard navigation.

Keys Description
ARROW DOWN Focuses the next step header in a vertical stepper.
ARROW UP Focuses the previous step header in a vertical stepper.
TAB Moves the focus to the next tabbable element.
SHIFT + TAB Moves the focus to the previous tabbable element.
HOME Moves the focus to the header of the FIRST enabled step in the igx-stepper
END Moves the focus to the header of the LAST enabled step in the igx-stepper
ARROW RIGHT Moves the focus to the header of the next accessible step in both orientations.
ARROW LEFT Moves the focus to the header of the previous accessible step in both orientations.
ENTER / SPACE Activates the currently focused step.
CLICK Activates the currently focused step.

By design when the user presses the Tab key over the step header the focus will move to the step content container. In case the container should be skipped the developer should set the content container [tabIndex]="-1"

API Summary

IgxStepperComponent

Accessors

Get

Name Description Type
steps Gets the steps that are rendered in the stepper. IgxStepComponent[]

Properties

Name Description Type
id The id of the stepper. Bound to attr.id string
orientation Gets/sets the orientation of the stepper. Default is horizontal. IgxStepperOrientation
stepType Gets/sets the type of the steps in the stepper. Default value is full IgxStepType
titlePosition Gets/sets the position of the titles in the stepper. Default value is bottom when the stepper is horizontally orientated and end when the layout is set to vertical. IgxStepperTitlePosition
linear Whether the validity of previous steps should be checked and only in case, it's valid to be able to move forward or not. Default value is false. boolean
contentTop Whether the steps content should be displayed above the steps header when the stepper orientation is Horizontal. Default value is false. boolean
verticalAnimationType Gets/sets the animation type of the stepper when the orientation direction is vertical. Default value is grow. VerticalAnimationType
horizontalAnimationType Gets/sets the animation type of the stepper when the orientation direction is horizontal. Default value is slide. HorizontalAnimationType
animationDuration 320 number

Methods

Name Description Parameters Returns
navigateTo Activates the step given by index. index: number void
next Activates the next enabled step. void
prev Activates the previous enabled step. void
reset Resets the stepper to its initial state. void

Events

Name Description Cancelable Arguments
activeStepChanging Emitted when the active step is about to change. true { oldIndex: number, newIndex: number, owner: IgxStepperComponent, cancel: boolean }
activeStepChanged Emitted when the active step is changed. false { index: number, owner: IgxStepperComponent }

IgxStepComponent

Accessors

Get

Name Description Type
index Gets the step index inside of the stepper. number

Properties

Name Description Type
id The id of the step. Bound to attr.id string
disabled Gets/sets whether the step is interactable. boolean
active Gets/sets whether the step is activе. Two-way data binding. boolean
optional Gets/sets whether the step is optional. boolean
complete Gets/sets whether the step is completed. boolean
isValid Gets/sets whether the step is valid. Default value is true. boolean

Events

Name Description Cancelable Parameters
activeChange Emitted when the step's active property changes false boolean