ASP.NET Core Stepper Overview
The Stepper is part of Telerik UI for ASP.NET Core, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
The Telerik UI Stepper TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI Stepper widget.
The Stepper is an intuitive UI component that visualizes progress by displaying a sequence of logical steps. The Stepper widget could also be used for navigational purposes.
Initializing the Stepper
The following example demonstrates how to define the Stepper.
@(Html.Kendo().Stepper()
.Name("stepper")
)
<kendo-stepper name="stepper">
</kendo-stepper>
Basic Configuration
The following example demonstrates the basic configuration for the Stepper.
@(Html.Kendo().Stepper()
.Name("stepper")
.Steps(s =>
{
s.Add().Label("First Step");
s.Add().Label("Second Step").Selected(true);
s.Add().Label("Last Step").Icon("save");
})
)
<script>
$(function() {
// The Name() of the Stepper is used to get its client-side instance.
var stepper = $("#stepper").data("kendoStepper");
});
</script>
<kendo-stepper name="stepper">
<steps>
<step label="First" icon="home"></step>
<step label="Second" selected="true"></step>
<step label="Third"></step>
<step label="Fourth" enabled="false"></step>
<step label="Fifth"></step>
</steps>
</kendo-stepper>
Events
You can subscribe to all Stepper events.
<kendo-stepper name="stepper" on-activate="onActivate" on-select="onSelect">
<steps>
<step label="First" icon="home"></step>
<step label="Second" selected="true"></step>
<step label="Third"></step>
<step label="Fourth" enabled="false"></step>
<step label="Fifth"></step>
</steps>
</kendo-stepper>
<script>
function onActivate(e) {
console.log("Activated: " + e.step.options.label);
}
function onSelect(e) {
console.log("Selected: " + e.step.options.label);
}
</script>
Functionality and Features
- Icons—The Stepper enables you to customize the rendered icons.
- Steps—The component provides different configuration options for its steps.
- Appearance—The Stepper enables you to customize its final appearance.
- Operation modes—The component provides the capability of operation modes.
- Accessibility—The Stepper is compatible with the global accessibility requirements.