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
Name | Type | Default | Description |
---|---|---|---|
animation? |
|
Specifies the duration of the progress indicator animation in milliseconds. Defaults to The possible values are:
| |
currentStep |
|
The index of the current step. | |
errorIcon |
|
Specifies a custom icon that will be rendered inside the step for invalid previous steps. | |
errorSVGIcon |
|
Defines an SVGIcon to be rendered for the error icon. The input can take either an existing Kendo SVG icon or a custom one. | |
linear |
|
|
Specifies the linear flow of the Stepper. |
orientation |
|
Specifies the orientation of the Stepper (see example). The possible values are:
| |
steps |
|
The collection of steps that will be rendered in the Stepper. (see example) | |
stepType |
|
Specifies the type of the steps in the Stepper. The possible values are:
| |
successIcon |
|
Specifies a custom icon that will be rendered inside the step for valid previous steps. | |
successSVGIcon |
|
Defines an SVGIcon to be rendered for the success icon. The input can take either an existing Kendo SVG icon or a custom one. | |
svgIcon |
|
Defines an SVG icon to be rendered inside the step indicator instead of the default numeric or text content. The input can take either an existing Kendo SVG icon or a custom one. |
Events
Name | Type | Description |
---|---|---|
activate |
|
Fires when a step is about to be activated. This event is preventable. |
currentStepChange |
|
Fires when the |
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 |