DevExtreme拥有高性能的HTML5 / JavaScript小部件集合，使您可以利用现代Web开发堆栈（包括React，Angular，ASP.NET Core，jQuery，Knockout等）构建交互式的Web应用程序。从Angular和Reac，到ASP.NET Core或Vue，DevExtreme包含全面的高性能和响应式UI小部件集合，可在传统Web和下一代移动应用程序中使用。 该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。
DevExpress JS & ASP.NET Core v25.1已全新发布，新版本发布了全新的Stepper组件等，欢迎下载最新版组件体验！
点击获取DevExtreme v25.1正式版下载
全新的Stepper（进度条）组件
DevExpress v25.1版本包含了一个新的Stepper UI（进度条UI）组件，DevExtreme Stepper显示用户通过多步骤流程和表单移动的进度，该组件非常适合用于签出、登录表单、设置向导等。
Stepperr具有以下功能：
- 数据源集成：您可以使用dataSource或items集合将数据绑定到Stepper组件。
- 水平和垂直布局：设置orientation属性来指定步骤是从左到右还是从上到下定位。
- 两种导航模式：使用 linear 属性指定用户是否按顺序导航步骤，默认值（true）不允许用户跳过步骤。
- 预选步骤：指定 selectedIndex 属性来设置最初选择的步骤。
- 可自定义的步骤指标：步骤指标默认显示连续的数字，在步骤对象中定义图标或文本来自定义步骤指示符内容。
- 步骤标签：设置标签步骤属性，显示步骤指标下方的标签。
- 步骤模板：您可以使用项目模板完全自定义步骤外观和指示器形状，为所有步骤定义itemTemplate或为单个步骤定义items[].template。
- 可视化步骤验证：设置label步骤属性来在步骤指示器下面显示标签，使用isValid属性将步骤标记为有效/无效。
- 可选和禁用步骤：将步骤标记为可选/禁用。
- 键盘导航：当使用键盘与进度条交互时，所选步骤会随着焦点而改变，将selectOnFocus设置为false以防止这种自动选择。移动焦点后，按“空格”或“Enter”键选择需要移动的步骤，DevExtreme Stepper还支持快捷方式。
- 国际化：将 rtlEnabled 设置为true来将步骤进度更改为从右向左（RTL）。垂直进度条在RTL模式中继续从上到下进行，但会切换标签位置。
每个步骤使用以下属性提供多个自定义选项：
- icon：进度条指示器内的图标，进度条将图表置于文本属性之上。
- text：进度条指示符内的文字。
- label：指示器旁边显示的步骤说明。
- optional：为步骤添加（可选）标签。
- isValid：表示用户输入产生了验证错误。
- disabled：任何终端用户操作都不能选择已禁用的步骤。
- hint：步骤的工具提示文本。
- template：自定义步骤，此属性完全覆盖步骤内容。
请注意，isValid, optional 和 disabled是可视化UI选项。您需要实现自己的逻辑，用于步骤验证和基于关联状态在步骤之间导航（例如，使用onSelectionChanging）。
下面的代码定义了一个简单的步骤：
注意：如果用Angular实现Stepper，您必须使用我们新的配置组件。
Angular
<dx-stepper> <dxi-stepper-item title="Cart" icon="cart"></dxi-stepper-item> <dxi-stepper-item title="Promo Code" icon="gift" [optional]="true"></dxi-stepper-item> <dxi-stepper-item title="Checkout" icon="packagebox"></dxi-stepper-item> </dx-stepper>React
const = App() => { return ( <Stepper> <Item title="Cart" icon="cart" /> <Item title="Promo Code" icon="gift" optional={true} /> <Item title=" Checkout" icon="packagebox" /> </Stepper> ); }Vue
<template> <DxStepper> <DxItem title="Cart" icon="cart" /> <DxItem title="Promo Code" icon="gift" :optional="true" /> <DxItem title=" Checkout" icon="packagebox" /> </DxStepper> </template>jQuery
$('#stepper').dxStepper({ // ... items: { { title: 'Cart', icon: 'cart' }, { title: 'Promo Code', icon: 'gift', optional: true }, { title: 'Checkout', icon: 'packagebox' } } });
