syncfusion-blazor-stepper

实现 Syncfusion Blazor Stepper 组件

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

何时使用此技能

在需要以下功能时使用 Stepper 组件：

• 创建多步骤向导或工作流
• 显示连续任务的进度
• 构建带验证功能的分步表单
• 实现清单式导航
• 引导用户完成入门流程
• 显示可选步骤与必需步骤
• 在继续前验证步骤是否完成

组件概览

Stepper 以水平或垂直布局显示步骤，并支持配置指示器、标签和模板。每个步骤都可以自定义：

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

文档与导航指南

API 参考

📄 阅读： references/api-reference.md

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

入门指南

📄 阅读： references/getting-started.md

• Blazor WebAssembly 和 Blazor Web App 的安装与包配置
• 服务注册和命名空间导入
• 使用图标和标签实现基本的 Stepper
• 适用于现代 Web App 的交互式呈现模式
• 主题配置和 CSS 导入

步骤类型与配置

📄 阅读： references/step-types.md

• 步骤类型变体（Default、Label、Indicator）
• 标签位置（Top、Bottom、Start、End）
• 步骤属性和特性
• 可选和禁用步骤
• 线性与非线性工作流
• 步骤状态管理

事件与交互

📄 阅读： references/events.md

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

模板与自定义

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

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

高级功能

📄 阅读： references/advanced-features.md

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

动画与全球化

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

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

方向与布局

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

• 水平方向（默认）
• 垂直方向
• 线性流程与顺序推进
• 非线性流程与自由导航
• 响应式设计模式
• 移动端和桌面端布局注意事项

快速入门示例

@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>

常见模式

线性工作流

使用 Linear 属性强制按顺序推进——用户只有完成当前步骤后，才能进入下一步。

<SfStepper Linear="true">
    
</SfStepper>

活动步骤控制

设置 ActiveStep 属性以控制当前活动步骤（从 0 开始索引）。

<SfStepper ActiveStep="1">
    
</SfStepper>

跟踪步骤变化

处理 StepChanged 事件，以便在用户切换步骤时作出响应。

<SfStepper StepChanged="@OnStepChanged">
    
</SfStepper>

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

验证状态

使用各个步骤上的 IsValid 属性显示成功或错误状态。

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

关键属性

属性	类型	用途
ActiveStep	int	设置当前活动步骤（从 0 开始索引）
LinearFlow	bool	强制按顺序推进步骤
ReadOnly	bool	禁止用户与步骤条交互
StepType	StepperType	显示格式（Default、Label、Indicator）
Orientation	StepperOrientation	布局方向（Horizontal、Vertical）
LabelPosition	StepperLabelPosition	标签位置（Top、Bottom、Start、End）

步骤属性：

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

常见用例

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

表单向导：将复杂表单拆分为易于处理的步骤，并提供可选部分。

引导入门：为新用户创建分步教程，并跟踪进度。

设置向导：通过成功或错误状态引导用户完成配置流程。

任务列表：以清单形式展示进度，并标示已完成或待处理的任务。