syncfusion-angular-stepper

用途

Syncfusion Angular Stepper 组件用于展示分步流程或工作流，适合向导（wizard）、用户引导（onboarding）和多步骤表单。本技能指导开发者实现、配置和自定义该组件，可完整控制步骤外观、校验、事件和动画。

主要能力

多种步骤类型：默认（图标 + 标签）、仅指示器（Indicator Only）、仅标签（Label Only）。
两种方向：水平（默认）和垂直。
丰富的事件系统：created、stepChanged、stepChanging、beforeStepRender、stepClick。
步骤校验：线性流程、完成状态、条件式推进。
自定义：图标、标签、模板、动画、工具提示。
无障碍：符合 WCAG、支持键盘导航和 RTL。

使用方式

快速开始示例

import { Component } from "@angular/core";
import { StepperAllModule, StepperModule } from "@syncfusion/ej2-angular-navigations";

@Component({
  imports: [ StepperAllModule, StepperModule ],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="stepper-container">
      <ejs-stepper>
        <e-steps>
          <e-step label="Cart" iconCss="sf-icon-cart"></e-step>
          <e-step label="Delivery Address" iconCss="sf-icon-transport"></e-step>
          <e-step label="Payment" iconCss="sf-icon-payment"></e-step>
          <e-step label="Confirmation" iconCss="sf-icon-success"></e-step>
        </e-steps>
      </ejs-stepper>
    </div>
  `,
  styles: [`
    .stepper-container {
      padding: 20px;
      max-width: 800px;
      margin: 0 auto;
    }
  `]
})
export class AppComponent { }

常见模式

模式 1：带表单校验的向导

<ejs-stepper (stepChanging)="onStepChanging($event)">
  <e-steps>
    <e-step label="Personal Info"></e-step>
    <e-step label="Contact Details"></e-step>
    <e-step label="Address"></e-step>
    <e-step label="Confirmation"></e-step>
  </e-steps>
</ejs-stepper>

使用 stepChanging 事件在允许进入下一步之前校验表单数据。

模式 2：动态步骤图标

<ejs-stepper>
  <e-steps>
    <e-step *ngFor="let step of steps" 
            [label]="step.label" 
            [iconCss]="step.icon"></e-step>
  </e-steps>
</ejs-stepper>

使用 *ngFor 指令动态绑定步骤数据。

模式 3：线性工作流

<ejs-stepper [linear]="true">
  <e-steps>
    <e-step label="Step 1"></e-step>
    <e-step label="Step 2"></e-step>
    <e-step label="Step 3"></e-step>
  </e-steps>
</ejs-stepper>

启用 linear 属性以强制顺序推进。

模式 4：事件处理

onStepChanged(args: StepperChangedEventArgs) {
  console.log(`Active step index: ${args.activeStep}`);
}

onStepChanging(args: StepperChangingEventArgs) {
  if (!isFormValid()) {
    args.cancel = true; // Prevent step change
  }
}

使用事件处理器跟踪导航并校验进度。

关键属性

属性	类型	默认值	使用场景
stepType	StepType	Default	更改显示样式：Default、Indicator、Label
orientation	Orientation	Horizontal	设置布局：Horizontal 或 Vertical
linear	boolean	false	强制顺序推进
activeStep	number	0	设置当前活动步骤（从 0 开始）
animation	StepperAnimationSettingsModel	enabled	配置过渡动画
showTooltip	boolean	false	步骤悬停时显示工具提示
labelPosition	string	Bottom	标签位置：Top、Bottom、Start、End
readOnly	boolean	false	禁用所有步骤交互
cssClass	string	-	应用自定义 CSS 类
enableRtl	boolean	false	为阿拉伯语、希伯来语、乌尔都语启用 RTL
enablePersistence	boolean	false	在页面重新加载之间保持状态
locale	string	en-US	设置语言/文化

参考文档

入门：references/getting-started.md（安装与包配置、Angular CLI 设置与依赖、独立 Angular 中的基础 Stepper 实现、CSS 导入与主题设置、首次渲染与初始配置）
API 参考：references/api-reference.md（Stepper 组件属性、Step 模型属性、动画设置、Stepper 方法、事件概览、枚举）
配置步骤：references/steps-configuration.md（使用 <e-step> 指令添加步骤、iconCss 配置图标、标签与文本内容、activeStep 设置活动步骤、可选与禁用步骤、只读模式、状态跟踪、isValid 校验、标签定位与对齐）
选择步骤类型：references/step-types.md（默认类型、仅指示器、仅标签、标签位置、各类型适用场景与选择模式）
设置方向：references/orientations-and-layouts.md（水平方向、垂直方向、布局配置与响应式设计、基于用例的方向选择）
事件与交互：references/events-and-interactions.md（created、stepChanged、stepChanging、beforeStepRender、stepClick 及 EventArgs 参考、事件处理器模式与最佳实践）
校验与流程控制：references/validation-and-flow.md（线性流程配置、步骤校验与完成状态、状态管理、条件式推进、错误处理与状态管理）
模板与样式：references/templates-and-customization.md（使用 <ng-template> 自定义步骤模板、模板绑定与数据上下文、cssClass 自定义、布局与外观自定义、响应式样式模式）
高级功能：references/advanced-features.md（动画设置、工具提示配置与模板、全球化与本地化、RTL 支持、无障碍与键盘导航、WCAG 合规与屏幕阅读器支持）

适用场景

向导表单：实现带每步校验的多步骤表单向导。
引导流程：引导新用户完成设置或介绍步骤。
流程跟踪：展示工作流进度（订单处理、职位申请）。
多步骤结账：创建包含地址和支付步骤的购物车工作流。
设置助手：通过引导式分步设置配置工具或服务。
文档提交：带校验的多步骤文档上传。

限制

资料未提供关于收费、价格、平台限制或性能效果的具体说明，暂未提供。