DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現(xiàn)代Web開發(fā)堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構(gòu)建交互式的Web應(yīng)用程序。從Angular和Reac，到ASP.NET Core或Vue，DevExtreme包含全面的高性能和響應(yīng)式UI小部件集合，可在傳統(tǒng)Web和下一代移動(dòng)應(yīng)用程序中使用。 該套件附帶功能齊全的數(shù)據(jù)網(wǎng)格、交互式圖表小部件、數(shù)據(jù)編輯器等。

DevExtreme今年近期發(fā)布了重大版本v23.2，新版本進(jìn)一步提升了可訪問性、并增強(qiáng)了性能等，歡迎獲取新版體驗(yàn)！

DevExpress技術(shù)交流群10：532598169      歡迎一起進(jìn)群討論

可訪問性

在此發(fā)布周期(WCAG和Section 508標(biāo)準(zhǔn))中引入了以下與可訪問性相關(guān)的增強(qiáng)：

• Data Grid（數(shù)據(jù)網(wǎng)格）：
  • 改善色彩對(duì)比
  • 修復(fù)了所有檢查器錯(cuò)誤（Axe, WAVE, Lighthouse）
  • 自適應(yīng)行現(xiàn)在可以使用鍵盤導(dǎo)航展開/折疊
  • 新版本增加了關(guān)注總摘要和組頁腳摘要的能力
• 新版本增強(qiáng)了屏幕閱讀器用戶的閱讀體驗(yàn)，現(xiàn)在支持以下元素：
  • 在DataGrid批處理編輯模式下修改單元格和刪除行
  • 刪除DataGrid中的確認(rèn)消息
  • 對(duì)DataGrid中的標(biāo)頭索引進(jìn)行排序
  • 查找項(xiàng)
  • HtmlEditor中的對(duì)話框標(biāo)題
  • 各種組件中的驗(yàn)證消息，如DataGrid, HtmlEditor, DropDownBox, NumberBox, DateBox
• aria-*屬性的全局重做
• 改進(jìn)對(duì)多個(gè)組件的鍵盤導(dǎo)航支持，包括增強(qiáng)Calendar組件中的焦點(diǎn)
• 更新了Popup和其他組件中的視覺焦點(diǎn)指示

性能

支持Vite Tree Shaking

新版本解決了以前導(dǎo)致JS包大小變大的Vite支持限制，您不需要在基于DevExtreme的JS應(yīng)用程序中禁用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演示代碼轉(zhuǎn)移到TypeScript中，也從Options API過渡到Composition API。

TypeScript增強(qiáng)

• Angular組件屬性現(xiàn)在支持文字聯(lián)合類型，IntelliSense提供提示，以識(shí)別代碼中此類類型的誤用。

• DevExtreme Angular允許您指定泛型類型參數(shù)來定義數(shù)據(jù)感知組件的實(shí)例，如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();
}
}