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. |
currentStep |
|
Specifies the index of the current step. | |
errorIcon |
|
Specifies an SVG icon that will be rendered inside the step for invalid previous steps. You can use either an existing Kendo SVG icon or a custom one. | |
errorSVGIcon |
|
Specifies an SVG icon to be rendered for the error icon. You can use 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). |
steps |
|
Specifies the collection of steps that will be rendered in the Stepper (see example). | |
stepType |
|
|
Specifies the type of the steps in the Stepper. |
successIcon |
|
Specifies an SVG icon that will be rendered inside the step for valid previous steps. You can use either an existing Kendo SVG icon or a custom one. | |
successSVGIcon |
|
Specifies an SVG icon to be rendered for the success icon. You can use either an existing Kendo SVG icon or a custom one. | |
svgIcon |
|
Specifies an SVG icon to be rendered inside the step indicator instead of the default numeric or text content. You can use either an existing Kendo SVG icon or a custom one. |
Events
Name | Type | Description |
---|---|---|
activate |
|
Fires when a step is about to be activated. You can prevent this event. |
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 |