StepperComponent
Represents the Kendo UI Stepper component for Angular.
@Component({
selector: 'my-app',
template: `
<kendo-stepper [steps]="steps">
</kendo-stepper>
`
})
class AppComponent {
public steps: Array<StepperStep> = [
{ label: 'Step One' }, { label: 'Step Two' }, { label: 'Step Three' }
];
}
Selector
kendo-stepper
Export Name
Accessible in templates as #kendoStepperInstance="kendoStepper"
Inputs
animation?
number | boolean
Specifies the duration of the progress indicator animation in milliseconds. Defaults to 400ms
.
The possible values are:
- Boolean
- (Default)
true
- false
- (Default)
- Number
errorIcon
string
Specifies a custom icon that will be rendered inside the step for invalid previous steps.
linear
boolean
(default: true) Specifies the linear flow of the Stepper.
orientation
Specifies the orientation of the Stepper (see example).
The possible values are:
- (Default)
horizontal
vertical
stepType
Specifies the type of the steps in the Stepper.
The possible values are:
- (Default)
indicator
label
full
successIcon
string
Specifies a custom icon that will be rendered inside the step for valid previous steps.
currentStep
number
The index of the current step.
steps
any[]
The collection of steps that will be rendered in the Stepper. (see example)
Events
activate
Fires when a step is about to be activated. This event is preventable.
currentStepChange
EventEmitter<number>
Fires when the currentStep
property of the component was updated.
Used to provide a two-way binding for the currentStep
property.
Methods
validateSteps
Manually triggers the validity check configured by the isValid property of the steps (see example).
Steps that have their validate property set to false
, will not be validated.