界面组件DevExtreme v23.2新功能预览 - 增强Material主题功能

发布时间 2023-10-08 10:36:01作者: AABBbaby

界面组件DevExtreme v23.2即将在几个月之后交付,本文将带大家预览一波新功能。

DevExtreme拥有高性能的HTML5 / JavaScript小部件集合,使您可以利用现代Web开发堆栈(包括React,Angular,ASP.NET Core,jQuery,Knockout等)构建交互式的Web应用程序。从Angular和Reac,到ASP.NET Core或Vue,DevExtreme包含全面的高性能和响应式UI小部件集合,可在传统Web和下一代移动应用程序中使用。 该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。

获取DevExtreme v23.1正式版下载

DevExpress技术交流群9:909157416      欢迎一起进群讨论

安装

要开始使用DevExtreme EAP构建,只需安装带有23.2-next标签的目标框架相关的NPM包,使用下面当中的一个命令继续:

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

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

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

npm install devextreme-vue@23.2-next --save-exact // Vue installation

Calendar — 离散日多选择

使用新的selectionMode选项,您现在有三种不同的模式可供选择:单个、多个或范围选择。在单模式下,用户可以选择一个日期,而在多模式下,用户可以选择多个日期,范围模式允许用户选择给定范围的第一个和最后一个日期。

DevExtreme v23.2产品图集

官方还扩展了value选项,允许您不仅可以设置单个日期作为初始值,还可以设置日期数组。为了简化calendar导航,还引入了一个electweekonclick选项,允许用户通过单击周数来选择整个一周。

Tab/TabPanel — 垂直方向和图标位置

这个EAP包括多个新的与Tab/TabPanel相关的功能。

对于Tab,我们添加了一个新的方向选项,允许您水平或垂直排列选项卡。

对于TabPanel,新tabsPosition选项允许您在面板的右侧、左侧、顶部和底部对齐选项卡。

DevExtreme v23.2产品图集

Tabs 和 TabPanel现在都包含一个图标位置选项,允许您定义图标在选项卡中的显示位置(开始,结束,顶部或底部位置)。

DevExtreme v23.2产品图集
表单/编辑器 — 更改检测(Dirty状态)

该EAP包括增强的编辑器和表单功能。

首先,官方将重置方法重命名为clear(为了跨组件的一致性)。为了维护重置功能,官方为编辑器引入了一种新的重置方法,允许您将值恢复到初始状态。

类似地,官方还重命名(并弃用)了Form的resetValues方法,并引入了clear方法。为了维护整个表单的重置功能,引入了一个新的重置方法。

新版本还将介绍isDirty标志,它现在对编辑器和表单都可用。isDirty标志有助于确定表单项或编辑器是否发生了更改,它允许您在表单保持不变时禁用重置按钮,从而消除不必要的操作。当用户意外关闭表单时,也可以使用isDirty。在这种情况下,您可以提示用户仅在进行修改时保存更改。

DevExtreme v23.2产品图集
Form(表单) — 支持DateRangeBox

您现在可以使用editorType: 'dxDateRangeBox'将DateRangeBox组件添加到表单中。

DevExtreme v23.2产品图集
<dxi-item
dataField="VacationDates"
editorType="dxDateRangeBox"
[editorOptions]="dateRangeBoxOptions"
>
</dxi-item>
增强Material主题功能

该EAP包括DevExtreme Material主题的以下更改:

  • 为了解决与可访问性相关的问题,Button组件的禁用状态现在包含更高对比度的颜色组合。
DevExtreme v23.2产品图集
  • 官方更新了ButtonGroup组件的外观,以确保与Google的Material设计指南保持一致。
DevExtreme v23.2产品图集
  • 不同的文本编辑器(类型)框现在是相同的高度,由于颜色组合的对比度更高,标签和占位符元素的内容也更容易访问。
DevExtreme v23.2产品图集
  • DevExtreme Accordion组件中引入了多个更改,标题中的文本和图标现在对齐了。旋转图标使用了对比度更高的颜色组合,组件的整体风格更符合Google的Material设计指南。
DevExtreme v23.2产品图集
可访问性

官方将继续在DevExtreme产品线中增强可访问性支持,该EAP包括针对DevExpress数据网格的与对比度相关的增强。

DevExtreme v23.2产品图集

使用WCAG和Section 508标准,官方还改善了使用屏幕阅读器的个人阅读体验。像读取验证消息这样的增强功能现在可以在各种组件中使用,比如DevExtreme DataGrid、HtmlEditor、DropDownBox、NumberBox和DateBox。

注意:为了帮助隔离/解决与可访问性相关的问题,官方使用了多种工具,包括aXe、Lighthouse和WAVE。


更多DevExpress线上公开课、中文教程资讯请上中文网获取