彩票走势图

界面控件DevExtreme v23.2新版亮点:可访问性、性能增强

翻译|产品更新|编辑:龚雪|2024-05-31 10:36:41.153|阅读 15 次

概述:DevExtreme今年近期发布了重大版本v23.2,新版本进一步提升了可访问性、并增强了性能等,欢迎获取新版体验!

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

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%
DevExtreme v23.2新版产品图集
Demos & TypeScript
React Demos — TypeScript和React Hooks

新版本将React demo示例迁移到TypeScript中,为您提供两种选择:JavaScript和TypeScript,此外我们还从类组件切换到功能组件。

DevExtreme v23.2新版产品图集
Vue Demos — TypeScript和Vue Composition API

新版本将所有Vue演示代码转移到TypeScript中,也从Options API过渡到Composition API。

TypeScript增强
  • Angular组件属性现在支持文字联合类型,IntelliSense提供提示,以识别代码中此类类型的误用。
DevExtreme v23.2新版产品图集
  • 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();
}
}


DevExpress 企业定制服务

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP