DevExtreme 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和下一代移动应用程序中使用。该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。

点击获取DevExtreme最新版下载

本文中包含了DevExtreme v25.1官方发布的当前/预计的开发计划，请注意此信息仅供参考，并不代表Developer Express Inc.的约束性承诺，下一个版本更新预计将在6月份更新，敬请期待~

安装

如果您拥有一个激活的Universal或DXperience授权，可以通过DevExpress DownloadManager或适当的NuGet包下载我们的EAP构建。

要开始使用DevExtreme v25.1 EAP构建，只需安装目标框架相关的NPM包（标记为25.1-next tag），使用以下命令中的一个继续：

npm install [email protected] --save-exact

npm install [email protected] --save-exact // Angular installation

npm install [email protected] --save-exact // React installation

npm install [email protected] --save-exact // Vue installation

早期访问和CTP构建仅用于早期测试目的，不准备用于生产使用。此版本可以与DevExpress产品的其他主要版本并排安装，请在安装Early Access和CTP版本之前备份您的项目和其他重要数据。

Early Access Preview构建被认为是预发布软件，您将在浏览器控制台中看到W0022错误。

全新的Stepper组件

早期预览版包含一个全新的Stepper UI组件，DevExtreme Stepper显示进度，用户通过一个序列移动。它非常适合多步骤过程，例如填充表单、登录或应用程序向导。

DevExtreme Stepper支持以下功能/选项：

数据源集成
水平或垂直布局
导航模式（按顺序步进或跳过）
预先确定的步骤
步骤指示器的自定义图标或文本
步骤标题
可视化步骤验证
可选和禁用的步骤
键盘导航
国际化(从右到左)

可以使用方向属性指定Stepper是水平的还是垂直的，使用线性属性将导航模式更改为线性或非线性，使用selectedIndex选项按索引预先选择项，selectOnFocus选项确定在通过键盘聚焦时是否自动选择项目。

您可以使用以下设置自定义每个步骤：

icon: 在步骤指示器内设置一个图标。
text: 在步骤指示符中合并文本。
title: 在步骤旁边放置标题。
isValid: 直观地指示验证状态。
optional: 可视化标记为可选的。
disabled: 禁用步骤。
hint: 添加浏览器内提示。

如果使用Angular来评估/测试EAP，建议使用新的配置组件：

XML 复制代码

<dx-stepper>
<dxi-stepper-item text="1"></dxi-stepper-item>
<dxi-stepper-item text="2" [optional]="true" ></dxi-stepper-item>
<dxi-stepper-item icon="gift"></dxi-stepper-item>
</dx-stepper>

Scheduler -- 工具栏自定义

这个EAP版本为DevExtreme Scheduler引入一个可自定义的工具栏（可用于Angular、React、jQuery和Vue），这个新功能可用于向内置工具栏添加自定义项，如Today按钮、新的约会按钮或自定义资源选择器。

指定工具栏属性来包含所需的项，您可以设置每个项目的location（很像独立工具栏），对于DevExtreme组件，指定associatedoptions，要引入独特的元素，请使用自定义模板。

javascript 复制代码

$('#scheduler').dxScheduler({
// ...
toolbar: {
items: [
// DevExtreme components: dxButton
{
location: 'before',
locateInMenu: 'auto',
widget: 'dxButton',
options: {
text: 'Today',
stylingMode: 'outlined',
type: 'normal',
onClick() {
scheduler.option('currentDate', new Date());
},
},
},
// Predefined toolbar's elements
'dateNavigator',
// Custom element
{
template: '<div>Custom Item</div>',
},
]
}
});

预定义项包括"dateNavigator"和"viewSwitcher"，如果没有显式指toolbar，则屏幕上显示具有这两个项目的默认工具栏。

您还可以切换"dateNavigator"中使用的按钮顺序，并决定在屏幕上显示哪些按钮。

javascript 复制代码

toolbar: {
items: [
{
location: 'before',
name: 'dateNavigator',
options: {
items: ['dateInterval', 'prev', 'next'],
},
},
]
}

如果使用Angular来测试EAP，您必须在使用工具栏项时使用新的配置组件：

XML 复制代码

<dxo-scheduler-toolbar>
<dxi-scheduler-toolbar-item
name="dateNavigator"
location="before"
[options]="{items: ['dateInterval', 'prev', 'next']}">
</dxi-scheduler-toolbar-item>
</dxo-scheduler-toolbar>