Appearance
The Stepper is rendered horizontally with an indictor element and a label for each Step. The Stepper provides the possibility to customize all of these configurations
Orientation
The orientation of the Stepper could be configured via the orientation configuration property.
The following example demonstrates how to initialize a vertical Stepper from an existing <nav> element.
<nav id="stepper"></nav>
<script>
$(document).ready(function () {
$("#stepper").kendoStepper({
orientation: "vertical",
steps: [{
label: "First step"
},{
label: "Second step",
},{
label: "Last step",
}]
});
});
</script>
Layout
By default both the label and indicator of each Step are displayed. The Stepper layout could be configured via the label and indicator configuration properties.
The following example demonstrates how to initialize a Stepper from an existing <nav> element with only indicator elements displayed.
<nav id="stepper"></nav>
<script>
$(document).ready(function () {
$("#stepper").kendoStepper({
label: false,
indicator: true,
steps: [{
label: "First step"
},{
label: "Second step",
},{
label: "Last step",
}]
});
});
</script>