syncfusion-blazor-stepper

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing the Syncfusion Blazor Stepper Component

实现Syncfusion Blazor Stepper组件

The Blazor Stepper component provides an intuitive way to guide users through multi-step processes. It displays progress across numbered or labeled steps, supporting linear and non-linear workflows with customizable animations, templates, and validation states.

Blazor Stepper组件为用户提供了一种直观的方式来引导完成多步骤流程。它会显示编号或带标签步骤的进度，支持线性和非线性工作流，并可自定义动画、模板和验证状态。

When to Use This Skill

何时使用此技能

Use the Stepper component when you need to:

Create multi-step wizards or workflows
Display progress through sequential tasks
Build step-by-step forms with validation
Implement checklist-style navigation
Guide users through onboarding processes
Show optional vs. required steps
Validate step completion before progression

在以下场景中使用Stepper组件：

创建多步骤向导或工作流
展示连续任务的进度
构建带验证的分步表单
实现清单式导航
引导用户完成入职流程
区分可选步骤与必填步骤
在进入下一步前验证步骤完成情况

Component Overview

组件概述

The Stepper displays steps in a horizontal or vertical layout with configurable indicators, labels, and templates. Each step can be customized with:

Visual states: Not started, in progress, completed, error
Labels and icons: Custom text and CSS icon classes
Validation: Success or error indicators
Templates: Custom content for advanced layouts
Animations: Smooth transitions between steps

Stepper组件以水平或垂直布局显示步骤，指示器、标签和模板均可配置。每个步骤可通过以下方式自定义：

视觉状态：未开始、进行中、已完成、错误
标签与图标：自定义文本和CSS图标类
验证：成功或错误指示器
模板：用于高级布局的自定义内容
动画：步骤间的平滑过渡

Documentation and Navigation Guide

文档与导航指南

API Reference

API参考

📄 Read: references/api-reference.md

Complete API documentation for all properties, methods, and events
Component and property definitions with direct links to implementation guides
Event arguments reference and enumeration types
Complete component hierarchy (SfStepper, StepperStep, StepperAnimationSettings)

📄 阅读： references/api-reference.md

所有属性、方法和事件的完整API文档
组件和属性定义，附带指向实现指南的直接链接
事件参数参考和枚举类型
完整的组件层级（SfStepper、StepperStep、StepperAnimationSettings）

Getting Started

快速入门

📄 Read: references/getting-started.md

Installation and package setup for Blazor WebAssembly and Blazor Web App
Service registration and namespace imports
Basic Stepper implementation with icons and labels
Interactive render modes for modern Web Apps
Theme configuration and CSS imports

📄 阅读： references/getting-started.md

Blazor WebAssembly和Blazor Web App的安装与包设置
服务注册和命名空间导入
带图标和标签的基础Stepper实现
现代Web应用的交互式渲染模式
主题配置和CSS导入

Step Types and Configuration

步骤类型与配置

📄 Read: references/step-types.md

Step type variations (Default, Label, Indicator)
Label positioning (Top, Bottom, Start, End)
Step properties and attributes
Optional and disabled steps
Linear vs. non-linear workflows
Step status management

📄 阅读： references/step-types.md

步骤类型变体（默认、标签、指示器）
标签位置（顶部、底部、左侧、右侧）
步骤属性和特性
可选和禁用步骤
线性与非线性工作流
步骤状态管理

Events and Interactions

事件与交互

📄 Read: references/events.md

Event handlers and lifecycle (Created, StepChanged, StepChanging, StepClicked, StepRendered)
Event arguments and parameters
Common event patterns
Handling step progression and validation

📄 阅读： references/events.md

事件处理程序与生命周期（Created、StepChanged、StepChanging、StepClicked、StepRendered）
事件参数和参数说明
常见事件模式
处理步骤推进和验证

Templates and Customization

模板与定制

📄 Read: references/templates-and-styling.md

Custom step templates
Template context and properties
CSS styling and customization
CssClass property for individual steps
Theme customization and appearance

📄 阅读： references/templates-and-styling.md

自定义步骤模板
模板上下文和属性
CSS样式与定制
单个步骤的CssClass属性
主题定制与外观设置

Advanced Features

高级功能

📄 Read: references/advanced-features.md

Step validation (IsValid property and validation states)
Validation workflow implementation
Tooltip support (ShowTooltip property and custom templates)
Step content templates and custom layouts
Step completion tracking and error handling
Conditional step display patterns

📄 阅读： references/advanced-features.md

步骤验证（IsValid属性和验证状态）
验证工作流实现
工具提示支持（ShowTooltip属性和自定义模板）
步骤内容模板和自定义布局
步骤完成跟踪与错误处理
条件步骤显示模式

Animations and Globalization

动画与全球化

📄 Read: references/animations-and-globalization.md

Animation settings (Duration and Delay)
Enabling/disabling animations
Localization support
RTL (Right-to-Left) support
Multi-language configuration

📄 阅读： references/animations-and-globalization.md

动画设置（Duration和Delay）
启用/禁用动画
本地化支持
RTL（从右到左）支持
多语言配置

Orientations and Layouts

方向与布局

📄 Read: references/orientations-and-layouts.md

Horizontal orientation (default)
Vertical orientation
Linear flow with sequential progression
Non-linear flow with free navigation
Responsive design patterns
Mobile and desktop layout considerations

📄 阅读： references/orientations-and-layouts.md

水平方向（默认）
垂直方向
带连续推进的线性流程
可自由导航的非线性流程
响应式设计模式
移动端和桌面端布局考量

Quick Start Example

快速入门示例

csharp

@using Syncfusion.Blazor.Navigations

<SfStepper>
    <StepperSteps>
        <StepperStep Label="Cart" IconCss="sf-icon-cart"></StepperStep>
        <StepperStep Label="Address" IconCss="sf-icon-transport"></StepperStep>
        <StepperStep Label="Payment" IconCss="sf-icon-payment"></StepperStep>
        <StepperStep Label="Ordered" IconCss="sf-icon-success"></StepperStep>
    </StepperSteps>
</SfStepper>

csharp

@using Syncfusion.Blazor.Navigations

<SfStepper>
    <StepperSteps>
        <StepperStep Label="Cart" IconCss="sf-icon-cart"></StepperStep>
        <StepperStep Label="Address" IconCss="sf-icon-transport"></StepperStep>
        <StepperStep Label="Payment" IconCss="sf-icon-payment"></StepperStep>
        <StepperStep Label="Ordered" IconCss="sf-icon-success"></StepperStep>
    </StepperSteps>
</SfStepper>

Common Patterns

常见模式

Linear Workflow

线性工作流

Use the

Linear

property to enforce sequential progression—users can only move to the next step after completing the current one.

csharp

<SfStepper Linear="true">
    <!-- Steps -->
</SfStepper>

使用

Linear

属性强制连续推进——用户必须完成当前步骤后才能进入下一步。

csharp

<SfStepper Linear="true">
    <!-- Steps -->
</SfStepper>

Active Step Control

激活步骤控制

Set the

ActiveStep

property to control which step is currently active (0-indexed).

csharp

<SfStepper ActiveStep="1">
    <!-- Steps -->
</SfStepper>

设置

ActiveStep

属性来控制当前激活的步骤（从0开始索引）。

csharp

<SfStepper ActiveStep="1">
    <!-- Steps -->
</SfStepper>

Tracking Step Changes

跟踪步骤变化

Handle the

StepChanged

event to respond when users navigate between steps.

csharp

<SfStepper StepChanged="@OnStepChanged">
    <!-- Steps -->
</SfStepper>

@code {
    private void OnStepChanged(StepperChangedEventArgs args)
    {
        // Handle step change
    }
}

处理

StepChanged

事件以响应用户在步骤间的导航操作。

csharp

<SfStepper StepChanged="@OnStepChanged">
    <!-- Steps -->
</SfStepper>

@code {
    private void OnStepChanged(StepperChangedEventArgs args)
    {
        // Handle step change
    }
}

Validation States

验证状态

Display success or error states using the

IsValid

property on individual steps.

csharp

<StepperStep Label="Payment" IsValid="true"></StepperStep>
<StepperStep Label="Confirm" IsValid="false"></StepperStep>

使用单个步骤的

IsValid

属性显示成功或错误状态。

csharp

<StepperStep Label="Payment" IsValid="true"></StepperStep>
<StepperStep Label="Confirm" IsValid="false"></StepperStep>

Key Properties

关键属性

Property	Type	Purpose
`ActiveStep`	`int`	Sets the currently active step (0-indexed)
`LinearFlow`	`bool`	Enforces sequential step progression
`ReadOnly`	`bool`	Disables user interaction with the stepper
`StepType`	`StepperType`	Display format (Default, Label, Indicator)
`Orientation`	`StepperOrientation`	Layout direction (Horizontal, Vertical)
`LabelPosition`	`StepperLabelPosition`	Label placement (Top, Bottom, Start, End)

Step Properties:

```
Label
```
: Display text for the step
```
Text
```
: Alternative text content
```
IconCss
```
: CSS class for custom icons
```
Disabled
```
: Prevents interaction with the step
```
Optional
```
: Marks step as optional
```
IsValid
```
: Sets validation state (true/false/null)
```
Status
```
: Current state (NotStarted, InProgress, Completed)
```
CssClass
```
: Custom CSS class for styling

属性	类型	用途
`ActiveStep`	`int`	设置当前激活的步骤（从0开始索引）
`LinearFlow`	`bool`	强制步骤连续推进
`ReadOnly`	`bool`	禁用用户与Stepper组件的交互
`StepType`	`StepperType`	显示格式（默认、标签、指示器）
`Orientation`	`StepperOrientation`	布局方向（水平、垂直）
`LabelPosition`	`StepperLabelPosition`	标签位置（顶部、底部、左侧、右侧）

步骤属性：

```
Label
```
: 步骤的显示文本
```
Text
```
: 替代文本内容
```
IconCss
```
: 自定义图标的CSS类
```
Disabled
```
: 阻止与该步骤的交互
```
Optional
```
: 将步骤标记为可选
```
IsValid
```
: 设置验证状态（true/false/null）
```
Status
```
: 当前状态（NotStarted、InProgress、Completed）
```
CssClass
```
: 用于样式定制的自定义CSS类

Common Use Cases

常见用例

Checkout Flow: Guide users through purchase steps with validation and error handling.

Form Wizards: Break complex forms into manageable steps with optional sections.

Onboarding: Create step-by-step tutorials for new users with progress tracking.

Setup Wizards: Guide users through configuration processes with success/error states.

Task Lists: Display checklist-style progress with completed/pending indicators.

结账流程：通过验证和错误处理引导用户完成购买步骤。

表单向导：将复杂表单拆分为可管理的步骤，并包含可选部分。

用户入职：创建分步教程，帮助新用户了解产品并跟踪进度。

设置向导：引导用户完成配置流程，并显示成功/错误状态。

任务清单：以清单形式展示进度，包含已完成/待处理指示器。