界面控件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.2，新版本进一步提升了可访问性、并增强了性能等，欢迎获取新版体验！
DevExpress技术交流群10：532598169 欢迎一起进群讨论
可访问性
在此发布周期(WCAG和Section 508标准)中引入了以下与可访问性相关的增强：
- Data Grid（数据网格）：
- 改善色彩对比
- 修复了所有检查器错误（Axe, WAVE, Lighthouse）
- 自适应行现在可以使用键盘导航展开/折叠
- 新版本增加了关注总摘要和组页脚摘要的能力
- 新版本增强了屏幕阅读器用户的阅读体验，现在支持以下元素：
- 在DataGrid批处理编辑模式下修改单元格和删除行
- 删除DataGrid中的确认消息
- 对DataGrid中的标头索引进行排序
- 查找项
- HtmlEditor中的对话框标题
- 各种组件中的验证消息，如DataGrid, HtmlEditor, DropDownBox, NumberBox, DateBox
- aria-*属性的全局重做
- 改进对多个组件的键盘导航支持，包括增强Calendar组件中的焦点
- 更新了Popup和其他组件中的视觉焦点指示
性能
支持Vite Tree Shaking
新版本解决了以前导致JS包大小变大的Vite支持限制，您不需要在基于DevExtreme的JS应用程序中禁用Vite的Tree Shaking功能。
减小CSS大小
DevExtreme包囊括了所有的Generic和Material主题，新版本将主题集的大小缩减如下：
- 30%为Generic主题
- 37%为Material主题
- 总体34%
Demos & TypeScript
React Demos — TypeScript和React Hooks
新版本将React demo示例迁移到TypeScript中，为您提供两种选择：JavaScript和TypeScript，此外我们还从类组件切换到功能组件。
Vue Demos — TypeScript和Vue Composition API
新版本将所有Vue演示代码转移到TypeScript中，也从Options API过渡到Composition API。
TypeScript增强
- Angular组件属性现在支持文字联合类型，IntelliSense提供提示，以识别代码中此类类型的误用。
- DevExtreme Angular允许您指定泛型类型参数来定义数据感知组件的实例，如DataGrid。
TS
import { Component, ViewChild } from '@angular/core';
import { DxDataGridComponent } from 'devextreme-angular/ui/data-grid';
import { Employee } from './data';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
@ViewChild(DxDataGridComponent) dataGrid!: DxDataGridComponent<Employee, number>;
onButtonClick() {
const selectedRows: Employee[] = this.dataGrid.instance.getSelectedRowData();
}
}
