syncfusion-angular-stepper

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion Angular Stepper

实现Syncfusion Angular Stepper组件

The Syncfusion Angular Stepper component displays a step-by-step process or workflow, ideal for wizards, onboarding, or multi-step forms. This skill guides you through implementing, configuring, and customizing the Stepper component with complete control over step appearance, validation, events, and animations.

Syncfusion Angular Stepper组件用于展示分步流程或工作流，非常适合向导、新用户引导或多步骤表单场景。本技能将指导你完成Stepper组件的实现、配置与自定义，让你完全掌控步骤外观、验证、事件和动画效果。

When to Use This Skill

何时使用此技能

Use this skill when:

Building multi-step wizards or workflows
Creating step-by-step forms or onboarding flows
Configuring step validation and linear flow
Adding icons, labels, and custom templates to steps
Handling step events (created, stepChanged, stepChanging, beforeStepRender, stepClick)
Customizing step appearance with animations and styling
Implementing tooltips, globalization, or RTL support

在以下场景使用此技能：

构建多步骤向导或工作流
创建分步表单或新用户引导流程
配置步骤验证与线性流程
为步骤添加图标、标签和自定义模板
处理步骤事件（created、stepChanged、stepChanging、beforeStepRender、stepClick）
通过动画和样式自定义步骤外观
实现工具提示、全球化或RTL（从右到左）支持

Component Overview

组件概述

The Stepper component provides:

Multiple step types: Default (icons + labels), Indicator Only, Label Only
Two orientations: Horizontal (default) and Vertical
Rich event system: created, stepChanged, stepChanging, beforeStepRender, stepClick
Step validation: Linear flow, completion states, conditional progression
Customization: Icons, labels, templates, animations, tooltips
Accessibility: WCAG compliance, keyboard navigation, RTL support

Stepper组件提供以下功能：

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

Complete Table of Contents

完整目录

🚀 Getting Started

🚀 快速入门

📄 Read: references/getting-started.md

Installation and package configuration
Angular CLI setup and dependencies
Basic stepper implementation in standalone Angular
CSS imports and theme setup
First render and initial configuration

📄 阅读： references/getting-started.md

安装与包配置
Angular CLI设置与依赖项
在独立Angular项目中实现基础步骤器
CSS导入与主题设置
首次渲染与初始配置

📋 API Reference

📋 API参考

📄 Read: references/api-reference.md

Stepper Component Properties:

activeStep

animation

cssClass

enablePersistence

enableRtl

labelPosition

linear

locale

orientation

readOnly

showTooltip

stepType

steps

template

tooltipTemplate

Step Model Properties:

cssClass

disabled

iconCss

isValid

label

optional

status

text

Animation Settings:
```
enable
```
,
```
duration
```
,
```
delay
```

Stepper Methods:

destroy()

nextStep()

previousStep()

refreshProgressbar()

reset()

Events Overview:

created

stepChanged

stepChanging

stepClick

beforeStepRender

Enumerations:

StepType

StepStatus

StepLabelPosition

StepperOrientation

📄 阅读： references/api-reference.md

Stepper组件属性：

activeStep

、

animation

、

cssClass

、

enablePersistence

、

enableRtl

、

labelPosition

、

linear

、

locale

、

orientation

、

readOnly

、

showTooltip

、

stepType

、

steps

、

template

、

tooltipTemplate

步骤模型属性：

cssClass

、

disabled

、

iconCss

、

isValid

、

label

、

optional

、

status

、

text

动画设置：
```
enable
```
、
```
duration
```
、
```
delay
```

Stepper方法：

destroy()

、

nextStep()

、

previousStep()

、

refreshProgressbar()

、

reset()

事件概述：

created

、

stepChanged

、

stepChanging

、

stepClick

、

beforeStepRender

枚举类型：

StepType

、

StepStatus

、

StepLabelPosition

、

StepperOrientation

⚙️ Configuring Steps

⚙️ 配置步骤

📄 Read: references/steps-configuration.md

Adding steps with
```
<e-step>
```
directive
Configuring icons with
```
iconCss
```
property
Setting labels and text content
Setting active step with
```
activeStep
```
Optional steps and disabling steps
Step read-only mode
Step status tracking
Step validation with
```
isValid
```
property
Label positioning and alignment

📄 阅读： references/steps-configuration.md

使用
```
<e-step>
```
指令添加步骤
通过
```
iconCss
```
属性配置图标
设置标签与文本内容
使用
```
activeStep
```
设置当前激活步骤
可选步骤与禁用步骤
步骤只读模式
步骤状态跟踪
使用
```
isValid
```
属性进行步骤验证
标签定位与对齐

🎨 Choosing Step Types

🎨 选择步骤类型

📄 Read: references/step-types.md

Default type with indicators and labels
Indicator Only type for compact layouts
Label Only type for text-based navigation
Label positions (Top, Bottom, Start, End)
When to use each type
Type selection patterns

📄 阅读： references/step-types.md

包含指示器和标签的默认类型
适用于紧凑布局的仅指示器类型
适用于文本导航的仅标签类型
标签位置（顶部、底部、左侧、右侧）
各类型的适用场景
类型选择模式

📐 Setting Orientations

📐 设置布局方向

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

Horizontal orientation (default)
Vertical orientation for tall layouts
Layout configuration and responsive design
Orientation selection based on use case

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

水平布局（默认）
适用于纵向布局的垂直方向
布局配置与响应式设计
根据使用场景选择布局方向

🎯 Handling Events & Interactions

🎯 处理事件与交互

📄 Read: references/events-and-interactions.md

```
created
```
event for initialization
```
stepChanged
```
event after step changes (with EventArgs)
```
stepChanging
```
event for step change prevention (with EventArgs)
```
beforeStepRender
```
event for pre-render customization (with EventArgs)
```
stepClick
```
event for click handling (with EventArgs)
Complete EventArgs reference documentation
Event handler patterns and best practices

📄 阅读： references/events-and-interactions.md

初始化时触发的
```
created
```
事件
步骤变更后触发的
```
stepChanged
```
事件（含EventArgs）
用于阻止步骤变更的
```
stepChanging
```
事件（含EventArgs）
用于预渲染自定义的
```
beforeStepRender
```
事件（含EventArgs）
处理点击操作的
```
stepClick
```
事件（含EventArgs）
完整的EventArgs参考文档
事件处理模式与最佳实践

✅ Validation and Flow Control

✅ 验证与流程控制

📄 Read: references/validation-and-flow.md

Linear flow configuration for sequential progression
Step validation and completion states
Step status management
Conditional step progression
Error handling and state management

📄 阅读： references/validation-and-flow.md

配置线性流程以强制顺序跳转
步骤验证与完成状态
步骤状态管理
条件步骤跳转
错误处理与状态管理

🎭 Templates and Styling

🎭 模板与样式定制

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

Custom step templates using
```
<ng-template>
```
Template binding and data context
CSS class customization (
```
cssClass
```
property)
Layout and appearance customization
Responsive styling patterns

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

使用
```
<ng-template>
```
创建自定义步骤模板
模板绑定与数据上下文
CSS类自定义（
```
cssClass
```
属性）
布局与外观定制
响应式样式模式

🌟 Advanced Features

🌟 高级功能

📄 Read: references/advanced-features.md

Animation settings (duration, delay, enable) with StepperAnimationSettingsModel
Tooltip configuration and tooltip templates
Globalization and localization (i18n)
RTL (Right-to-Left) support with
```
enableRtl
```
Accessibility features and keyboard navigation
WCAG compliance and screen reader support

📄 阅读： references/advanced-features.md

使用StepperAnimationSettingsModel配置动画设置（时长、延迟、启用状态）
工具提示配置与工具提示模板
全球化与本地化（i18n）
使用
```
enableRtl
```
启用RTL（从右到左）支持
无障碍功能与键盘导航
WCAG合规性与屏幕阅读器支持

Quick Start Example

快速入门示例

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 { }

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 { }

Common Patterns

常见模式

Pattern 1: Wizard with Form Validation

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

html

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

Use the

stepChanging

event to validate form data before allowing step progression.

html

<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

事件在允许步骤跳转前验证表单数据。

Pattern 2: Dynamic Step Icons

模式2：动态步骤图标

html

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

Bind step data dynamically using

*ngFor

directive.

html

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

使用

*ngFor

指令动态绑定步骤数据。

Pattern 3: Linear Workflow

模式3：线性工作流

html

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

Enable

linear

property to enforce sequential progression.

html

<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

属性以强制顺序跳转。

Pattern 4: Event Handling

模式4：事件处理

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

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

Use event handlers to track navigation and validate progress.

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

onStepChanging(args: StepperChangingEventArgs) {
  if (!isFormValid()) {
    args.cancel = true; // 阻止步骤变更
  }
}

使用事件处理程序跟踪导航并验证进度。

Key Properties Summary

关键属性汇总

Property	Type	Default	When to Use
`stepType`	StepType	Default	Change display style: Default, Indicator, Label
`orientation`	Orientation	Horizontal	Set layout: Horizontal or Vertical
`linear`	boolean	false	Enforce sequential progression
`activeStep`	number	0	Set current active step (0-indexed)
`animation`	StepperAnimationSettingsModel	enabled	Configure transition animations
`showTooltip`	boolean	false	Display tooltips on step hover
`labelPosition`	string	Bottom	Position labels: Top, Bottom, Start, End
`readOnly`	boolean	false	Disable all step interactions
`cssClass`	string	-	Apply custom CSS classes
`enableRtl`	boolean	false	Enable RTL for Arabic, Hebrew, Urdu
`enablePersistence`	boolean	false	Persist state between page reloads
`locale`	string	en-US	Set language/culture

For complete API reference with code examples, see: 📚 API Reference

属性	类型	默认值	使用场景
`stepType`	StepType	Default	更改显示样式：默认、仅指示器、仅标签
`orientation`	Orientation	Horizontal	设置布局：水平或垂直
`linear`	boolean	false	强制顺序跳转
`activeStep`	number	0	设置当前激活步骤（从0开始索引）
`animation`	StepperAnimationSettingsModel	enabled	配置过渡动画
`showTooltip`	boolean	false	鼠标悬停时显示工具提示
`labelPosition`	string	Bottom	设置标签位置：顶部、底部、左侧、右侧
`readOnly`	boolean	false	禁用所有步骤交互
`cssClass`	string	-	应用自定义CSS类
`enableRtl`	boolean	false	为阿拉伯语、希伯来语、乌尔都语启用RTL
`enablePersistence`	boolean	false	在页面刷新之间保留状态
`locale`	string	en-US	设置语言/区域

如需包含代码示例的完整API参考，请查看： 📚 API参考

Common Use Cases

常见使用场景

Wizard Forms: Implement multi-step form wizards with validation at each step Onboarding Flow: Guide new users through setup or introduction steps Process Tracking: Display workflow progress (order processing, job applications) Multi-Step Checkout: Create shopping cart workflows with address and payment steps Setup Assistants: Configure tools or services through guided step-by-step setup Document Submission: Multi-step document upload with validation

Next Steps: Select a reference above based on what you need to implement. Start with getting-started.md if this is your first time using the Stepper component.

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

下一步： 根据你需要实现的功能选择上方的参考文档。如果是首次使用Stepper组件，请从getting-started.md开始。