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月份更新,敬请期待~

安装

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

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

npm install devextreme@25.1-next --save-exact

npm install devextreme-angular@25.1-next --save-exact // Angular installation

npm install devextreme-react@25.1-next --save-exact // React installation

npm install devextreme-vue@25.1-next --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>
相关推荐
铅笔侠_小龙虾43 分钟前
动手实现简单Vue.js ,探索Vue原理
前端·javascript·vue.js
哟哟耶耶2 小时前
Starting again-02
开发语言·前端·javascript
Kitasan Burakku3 小时前
Typescript return type
前端·javascript·typescript
力Mer4 小时前
console.log()控制台异步打印与对象展开后不一致问题
前端·javascript
GISer_Jing4 小时前
得物前端二面潜在问题详解
前端·javascript·面试
未来之窗软件服务7 小时前
从东方仙盟筑基期看 JavaScript 动态生成图片技术-东方仙盟
开发语言·javascript·仙盟创梦ide·东方仙盟·图片技术
不叫猫先生8 小时前
中秋连连看小游戏开发完整教程
javascript·css·小游戏·连连看
itslife8 小时前
vite 源码 - 创建服务
前端·javascript
我的写法有点潮10 小时前
彻底理解 JavaScript 的深浅拷贝
前端·javascript·vue.js
Never_Satisfied12 小时前
在JavaScript / HTML中,转移字符导致js生成的html出错
开发语言·javascript·html