Skip to main content 首页 创作者 syncfusion aspnetcore-ui-components-skills syncfusion-aspnetcore-stepper
syncfusion-aspnetcore-stepper Create and configure ASP.NET Core Stepper controls to support multi-step workflows and progressive user interfaces. This skill should be applied when implementing step navigation, wizards, progress trackers, form flows, checkout processes, or any sequential step-based UI. It is also relevant whenever requirements involve steppers, step validation, step navigation, linear flows, or step-based state management.
跳到安装 Skills Marketplace 发现并探索由社区构建的 Agent Skills
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/syncfusion/aspnetcore-ui-components-skills --skill syncfusion-aspnetcore-stepper命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
下载 Zip 下载中... syncfusion-aspnetcore-grid Implements Syncfusion ASP.NET Core Grid component for feature-rich data tables and grids. Use this when working with data display, sorting, filtering, grouping, aggregates, editing, or exporting. This skill covers grid configuration, CRUD operations, virtual scrolling or infinite scrolling, hierarchy grids, state persistence, and advanced data management features for data-intensive applications.
syncfusion-aspnetcore-ai-assistview Implement the Syncfusion ASP.NET Core AI AssistView control for interactive AI-powered assistance interfaces. Use this skill when implementing AI assistants, prompt suggestions, custom views, file attachments, markdown responses, customizable templates, regenerable responses, thinking capabilities (chain-of-thoughts), generative UI blocks, Text-to-Speech conversion, Speech-to-Text voice input, or customizing advanced AI conversation UI in ASP.NET Core applications.
name syncfusion-aspnetcore-stepper description Create and configure ASP.NET Core Stepper controls to support multi-step workflows and progressive user interfaces. This skill should be applied when implementing step navigation, wizards, progress trackers, form flows, checkout processes, or any sequential step-based UI. It is also relevant whenever requirements involve steppers, step validation, step navigation, linear flows, or step-based state management. metadata {"author":"Syncfusion Inc","version":"34.1.29","category":"Navigation Controls"}
Implementing ASP.NET Core Stepper Control
The Syncfusion ASP.NET Core Stepper is a navigation component that guides users through a series of logical steps in a sequential workflow. Use it for wizards, multi-step forms, checkout processes, and any experience requiring step-by-step progression.
When to Use This Skill
Multi-step forms or wizards - Guide users through sequential data collectionCheckout flows - Show shopping cart → shipping → payment → confirmationProgress tracking - Display task or process completion statusLinear workflows - Enforce sequential step progression (e.g., registration, onboarding)Status visualization - Show which steps are completed, in-progress, or pendingStep validation - Display validation state (success/error) for each step
Control Overview
Key Capabilities:
Sequential step navigation with automatic or manual progression
Multiple step display types (default with indicators + labels, label-only, indicator-only)
Horizontal and vertical orientations for different layouts
Step status management (NotStarted, InProgress, Completed)
Step validation with success/error indicators
Linear mode for enforcing sequential progression
Rich templating for custom step content
Events for step changes, validation, and interactions
Tooltips with custom templates for additional guidance
Animation effects for smooth transitions
Localization and RTL support
Installation and Setup
NuGet package installation
TagHelper registration in _ViewImports.cshtml
CDN and NPM resource includes
Basic project setup
Creating Your First Stepper Quick Start Example - Basic horizontal stepper with 4 steps:
<ejs-stepper id ="stepper" activeStep ="0" >
<e-stepper-steps >
<e-stepper-step iconCss ="sf-icon-cart" label ="Shopping Cart" text ="Review items" > </e-stepper-step >
<e-stepper-step iconCss ="sf-icon-transport" label ="Shipping" text ="Enter address" > </e-stepper-step >
<e-stepper-step iconCss ="sf-icon-payment" label ="Payment" text ="Select payment" > </e-stepper-step >
<e-stepper-step iconCss ="sf-icon-success" label ="Confirmation" text ="Order complete" > </e-stepper-step >
</e-stepper-steps >
</ejs-stepper >
<ejs-stepper id ="stepper" orientation ="Vertical" >
<e-stepper-steps >
<e-stepper-step iconCss ="sf-icon-cart" label ="Cart" > </e-stepper-step >
<e-stepper-step iconCss ="sf-icon-transport" label ="Shipping" > </e-stepper-step >
<e-stepper-step iconCss ="sf-icon-payment" label ="Payment" > </e-stepper-step >
</e-stepper-steps >
</ejs-stepper >
Stepper Properties Key Stepper-Level Properties (15 total):
activeStep - Current step index (0-based)animation - Step transition animation configurationcssClass - CSS class for component stylingenablePersistence - Persist state across page reloadsenableRtl - Right-to-left layout supportlabelPosition - Label placement (Top, Bottom, Start, End)linear - Sequential-only progression modelocale - Localization culture settingorientation - Horizontal or Vertical layoutreadOnly - Disable all interactionsshowTooltip - Display tooltips on hoverstepType - Visual style (Default, Label, Indicator)steps - Array of step definitionstemplate - Custom step content templatetooltipTemplate - Custom tooltip template
Step Properties Step-Level Properties (8 total):
cssClass - CSS class for individual stepdisabled - Disable specific stepiconCss - Icon CSS classisValid - Validation state (true/false/null)label - Step label textoptional - Mark step as optionalstatus - Step status (NotStarted, InProgress, Completed)text - Step descriptive text
Animation Properties Animation Configuration (3 properties):
enable - Enable/disable animationduration - Animation duration in millisecondsdelay - Delay before animation starts <ejs-stepper id ="stepper" >
<e-stepper-animation enable ="true" duration ="1000" delay ="500" > </e-stepper-animation >
<e-stepper-steps >
<e-stepper-step label ="Step 1" > </e-stepper-step >
<e-stepper-step label ="Step 2" > </e-stepper-step >
</e-stepper-steps >
</ejs-stepper >
Stepper Methods Available Methods (12 total):
nextStep() - Move to next step programmaticallypreviousStep() - Move to previous stepaddEventListener(eventName, handler) - Add event listenerremoveEventListener(eventName, handler) - Remove event listenerdataBind() - Apply pending property changesrefresh() - Re-render componentrefreshProgressbar() - Update progress bar positionreset() - Reset to first stepgetRootElement() - Get root DOM elementdestroy() - Clean up componentappendTo(selector) - Append to target element
Events and Event Arguments Available Events (5 total):
created Fires after stepper rendering completes.
stepChanged Fires after active step successfully changes.
Args: activeStep, element, event, isInteracted, name
stepChanging Fires before active step changes (allows cancellation for validation).
Args: activeStep, cancel, element, event, isInteracted
stepClick Fires when user clicks a step.
Args: activeStep, previousStep, element, event, name
beforeStepRender Fires before rendering each step (allows dynamic modifications).
Args: index, element, name
Step Types and Orientations
Default step type (icons + labels)
Label-only step type with label positioning (Top, Bottom, Start, End)
Indicator-only step type
Horizontal orientation (side-by-side steps)
Vertical orientation (stacked steps)
Visual appearance customization
Step Configuration
Defining step icons with iconCss property
Adding text content and labels to steps
Optional step indicator
Disabling steps to prevent interaction
Setting active step with activeStep property
Step status values (NotStarted, InProgress, Completed)
Applying CSS classes for custom styling
Step validation with isValid property
Events and Interactions
Created event when stepper finishes rendering
stepChanged event after active step changes
stepChanging event before step change (validation point)
stepClick event when user clicks a step
beforeStepRender event for dynamic step modification
Linear navigation mode for sequential-only progression
Event pattern examples
Templates and Customization
Custom step templates with step model context
Tooltip configuration and display
Tooltip templates for detailed step information
CSS class customization
CSS properties for styling
Theme and appearance customization
Animation effects with duration and delay
Advanced Features
Animation configuration (enable, duration, delay)
Linear flow for sequential-only step progression
Localization and locale customization
RTL (right-to-left) layout support
Readonly mode to disable all interactions
Accessibility considerations
Performance optimization
Step Validation
Step validation patterns (isValid property)
Form validation with stepChanging event
Async validation patterns with fetch API
Real-time validation on user input
Validation state values (true/false/null)
Common Patterns
Wizard Pattern with Linear Navigation For forms that require sequential step completion, enable linear mode:
<ejs-stepper id ="wizard" linear ="true" >
<e-stepper-steps >
<e-stepper-step iconCss ="sf-icon-cart" label ="Cart" > </e-stepper-step >
<e-stepper-step iconCss ="sf-icon-transport" label ="Shipping" > </e-stepper-step >
<e-stepper-step iconCss ="sf-icon-payment" label ="Payment" > </e-stepper-step >
</e-stepper-steps >
</ejs-stepper >
Step Validation Pattern Validate form content before allowing step progression using stepChanging event:
<ejs-stepper id ="wizard" linear ="true" stepChanging ="validateStep" >
<e-stepper-steps >
<e-stepper-step iconCss ="sf-icon-cart" label ="Cart" > </e-stepper-step >
<e-stepper-step iconCss ="sf-icon-transport" label ="Shipping" > </e-stepper-step >
<e-stepper-step iconCss ="sf-icon-payment" label ="Payment" > </e-stepper-step >
</e-stepper-steps >
</ejs-stepper >
<script >
function validateStep (args ) {
var form = document .getElementById ('stepForm' );
if (!form.checkValidity ()) {
args.cancel = true ;
alert ('Please complete all required fields' );
}
}
</script >
Dynamic Content Pattern Load and display different content based on active step:
<ejs-stepper id ="stepper" activeStep ="@Model.CurrentStep" stepChanged ="onStepChanged" >
<e-stepper-steps >
</e-stepper-steps >
</ejs-stepper >
<div id ="content" >
</div >
<script >
function onStepChanged (args ) {
loadContentForStep (args.activeStep );
}
function loadContentForStep (stepIndex ) {
}
</script >
Common Use Cases
E-commerce checkout - Cart → Address → Payment → ConfirmationUser registration - Account info → Email verification → Profile → CompleteApplication wizard - Requirements → Configuration → Review → DeployOnboarding flow - Welcome → Profile → Preferences → StartTask workflow - Analyze → Plan → Execute → ReviewMulti-form survey - Demographics → Questions part 1 → Questions part 2 → Summary 