igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
124 lines (90 loc) • 6.71 kB
Markdown
# IgxStepperComponent
## Description
_**IgxStepperComponent** is a collection of **IgxStepComponent**s that delivers a wizard-like workflow:_
A complete walkthrough of how to get started can be found [here](https://www.infragistics.com/products/ignite-ui-angular/angular/components/stepper).
The specification for the stepper can be found [here](https://github.com/IgniteUI/igniteui-angular/wiki/Stepper-Specification)
----------
## Usage
```html
<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` |