syncfusion-javascript-stepper

用途

Syncfusion TypeScript Stepper 是 Syncfusion JavaScript UI 控件库中的导航控件，用于展示一系列逻辑步骤，引导用户完成多步骤工作流。它适合作为进度指示器、表单向导、结账流程、新手引导、任务或里程碑跟踪、多页调查等场景的步骤导航。

主要能力

步骤配置：通过 steps 数组定义步骤，每个步骤支持 label（标签文本）、text（描述）、iconCss（图标 CSS 类）、status（NotStarted、InProgress、Completed）、isValid（校验状态）、disabled（禁用）、optional（可选）、cssClass（自定义样式类）等属性。
步骤类型：默认类型（图标+标签）、仅标签类型、仅指示器类型；标签位置支持 Top、Bottom、Start、End。
布局方向：水平（默认）与垂直两种方向，支持响应式行为与动态切换。
事件与交互：提供 5 个事件——created（初始化完成）、beforeStepRender（渲染每个步骤前）、stepClick（用户点击步骤）、stepChanging（步骤切换前，可通过 args.cancel 取消）、stepChanged（步骤切换成功后）。
方法与属性：12 个控件方法（如 nextStep、previousStep、reset 等），15 个控件属性（如 steps、activeStep、stepType、orientation、labelPosition、linear、readOnly、showTooltip、animation、locale、enableRtl、enablePersistence 等）。
模板与动画：支持自定义步骤模板、模板数据绑定、工具提示定制、动画开关与时长/延迟配置。
校验与全球化：支持步骤校验状态、线性流程强制（linear）、本地化（L10n、locale）、从右到左（RTL）渲染、多语言与无障碍（ARIA、键盘导航）。

使用方式

通过 npm 安装依赖包（ej2-navigations、ej2-base、ej2-popups），引入 CSS 主题，然后以 TypeScript 初始化组件。最小示例：

import { Stepper } from '@syncfusion/ej2-navigations';

let stepper: Stepper = new Stepper({
  steps: [
    { label: 'Cart' },
    { label: 'Shipping' },
    { label: 'Payment' },
    { label: 'Confirmation' }
  ]
});

stepper.appendTo('#stepper');

<nav id="stepper"></nav>

带校验的表单向导示例：

import { Stepper, StepperChangingEventArgs } from '@syncfusion/ej2-navigations';

let stepper: Stepper = new Stepper({
  steps: [
    { label: 'Personal Info' },
    { label: 'Address' },
    { label: 'Review' }
  ],
  linear: true,
  stepChanging: (args: StepperChangingEventArgs) => {
    if (!isCurrentStepValid()) {
      args.cancel = true;
    }
  }
});
stepper.appendTo('#stepper');

动态步骤管理示例：

let stepper: Stepper = new Stepper({
  steps: [{}, {}, {}, {}],
  activeStep: 0
});
stepper.appendTo('#stepper');

stepper.nextStep();
stepper.previousStep();
stepper.reset();

stepper.activeStep = 2;
stepper.dataBind();

适用场景

结账向导：购物车、配送、支付、确认等多步骤购买流程。
表单向导：将长表单拆分到多个步骤，并在每步做校验。
新手引导：引导新用户完成设置步骤并显示进度。
任务工作流：跟踪一系列任务或里程碑的进度。
流程跟踪器：展示在既定流程中的当前位置。
多页调查：将调查问题分布到多个步骤并跟踪进度。

限制

资料未提供具体的收费、价格、平台兼容范围、性能上限或效果保证等信息，暂未提供。使用前需按官方文档确认依赖包版本、主题引入方式与浏览器支持情况。

技能介绍

用途

主要能力

使用方式

适用场景

限制