界面控件DevExpress JS & ASP.NET Core v25.1 - 全新的Stepper组件

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

XML 复制代码

<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

javascript 复制代码

const = App() => {
return (
<Stepper>
<Item
title="Cart"
icon="cart"
/>
<Item
title="Promo Code"
icon="gift"
optional={true}
/>
<Item
title=" Checkout"
icon="packagebox"
/>
</Stepper>
);
}

Vue

XML 复制代码

<template>
<DxStepper>
<DxItem
title="Cart"
icon="cart"
/>
<DxItem
title="Promo Code"
icon="gift"
:optional="true"
/>
<DxItem
title=" Checkout"
icon="packagebox"
/>
</DxStepper>
</template>

jQuery

javascript 复制代码

$('#stepper').dxStepper({
// ...
items: {
{
title: 'Cart',
icon: 'cart'
},
{
title: 'Promo Code',
icon: 'gift',
optional: true
},
{
title: 'Checkout',
icon: 'packagebox'
}
}
});