Your search did not match any results.

Stepper - Step Template

Stepper allows you to customize steps using the DevExtreme template engine. You can set custom markup for indicators including custom step shapes.

This demo uses the itemTemplate property to customize all steps in a Stepper. For individual step customization, specify the items[].template property.

Backend API
@{ var steps = new object[] { new { text = "A", label = "Cart", icon = "cart" }, new { text = "B", label = "Shipping Info", icon = "clipboardtasklist" }, new { text = "C", label = "Promo Code", icon = "gift", optional = true }, new { text = "D", label = "Checkout", icon = "packagebox" }, new { text = "E", label = "Ordered", icon = "checkmarkcircle" } }; } <div id="label-customStepShape" class="stepper-label">Custom Step Shape</div> @(Html.DevExtreme().Stepper() .ID("customStepShape") .SelectedIndex(2) .DataSource(steps) .Linear(false) .ElementAttr("aria-labelledby", "label-customStepShape") .ItemTemplate(@<text> <div class="dx-step-indicator"> <i class="dx-icon dx-icon-<%- icon %>"></i> </div> <div class="dx-step-caption"> <div class="dx-step-label"><%- label %></div> <% if (typeof optional !== "undefined" && optional) { %> <div class="dx-step-optional-mark">(Optional)</div> <% } %> </div> </text>) ) <div id="label-labelOnly" class="stepper-label">Label Only</div> @(Html.DevExtreme().Stepper() .ID("labelOnly") .SelectedIndex(2) .DataSource(steps) .Linear(false) .ElementAttr("aria-labelledby", "label-labelOnly") .ItemTemplate(@<text> <div class="dx-step-caption"> <div class="dx-step-label"><%- label %></div> </div> </text>) ) <div id="label-iconOnly" class="stepper-label">Icon Only</div> @(Html.DevExtreme().Stepper() .ID("iconOnly") .SelectedIndex(2) .DataSource(steps) .Linear(false) .ElementAttr("aria-labelledby", "label-iconOnly") .ItemTemplate(@<text> <i class="dx-icon dx-icon-<%- icon %>"></i> </text>) )
using DevExtreme.NETCore.Demos.Models.SampleData; using DevExtreme.NETCore.Demos.ViewModels; using Microsoft.AspNetCore.Mvc; namespace DevExtreme.NETCore.Demos.Controllers { public class StepperController : Controller { public ActionResult StepTemplate() { return View(); } } }
.demo-container { display: flex; flex-direction: column; align-items: center; justify-content: center; row-gap: 16px; height: 580px; min-width: 320px; } .stepper-label { font-weight: 600; } #customStepShape { margin-bottom: 64px; } #customStepShape .dx-step-indicator { border-radius: 4px; } #labelOnly { margin-bottom: 64px; align-items: center; } #labelOnly .dx-step { padding-inline: 2px; } #labelOnly .dx-step-content { padding-block: 4px; } #labelOnly .dx-step-caption { width: auto; max-width: 100%; } #labelOnly .dx-step-label { background-color: var(--dx-color-main-bg); padding-inline: 8px; } #labelOnly .dx-step.dx-state-focused .dx-step-caption { box-shadow: 0 0 0 2px var(--dx-color-main-bg), 0 0 0 4px var(--dx-color-primary), 0 0 0 8px var(--dx-color-main-bg); border-radius: 4px; } #iconOnly { align-items: center; } #iconOnly .dx-step-content { margin-block: 4px; } #iconOnly .dx-icon { box-sizing: content-box; padding: 6px; background-color: var(--dx-color-main-bg); } #iconOnly .dx-state-focused .dx-icon { box-shadow: 0 0 0 2px var(--dx-color-primary), 0 0 0 6px var(--dx-color-main-bg); border-radius: 4px; } #iconOnly :is(.dx-step-selected, .dx-step-completed) .dx-icon { color: var(--dx-color-primary); }