Getting Started with the Stepper
This guide demonstrates how to get up and running with the Kendo UI for jQuery Stepper.
After the completion of this guide, you will be able to achieve the following end result:
<nav id="stepper"></nav>
<script>
$(document).ready(function () {
$("#stepper").kendoStepper({
steps: [{
label: "First step"
},{
label: "Second step",
selected: true
},{
label: "Last step",
icon: "save"
}]
});
});
</script>
1. Create an Empty Nav Element
First, create an empty <nav> element on the page that will serve as the main container of the Stepper component.
<nav id="stepper"></nav>
2. Initialize the Stepper
In this step, you will initialize the Stepper from the empty <nav> element. All settings of the Stepper will be provided in the initialization script statement and you have to describe its layout and configuration in JavaScript.
<nav id="stepper"></nav>
<script>
// Target the nav element by using jQuery and then call the kendoStepper() method.
$("#stepper").kendoStepper();
</script>
3. Add the Steps
The component's steps provide various options, such as icons, templates, labels, and others.
<nav id="stepper"></nav>
<script>
$(document).ready(function () {
$("#stepper").kendoStepper({
steps: [{
label: "First step"
},{
label: "Second step",
selected: true
},{
label: "Last step",
icon: "save"
}]
});
});
</script>