界面組件DevExtreme v23.2即將在幾個月之后交付，本文將帶大家預(yù)覽一波新功能。

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和下一代移動應(yīng)用程序中使用。 該套件附帶功能齊全的數(shù)據(jù)網(wǎng)格、交互式圖表小部件、數(shù)據(jù)編輯器等。

獲取DevExtreme v23.1正式版下載

DevExpress技術(shù)交流群9：909157416      歡迎一起進群討論

安裝

要開始使用DevExtreme EAP構(gòu)建，只需安裝帶有23.2-next標簽的目標框架相關(guān)的NPM包，使用下面當中的一個命令繼續(xù)：

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選項，您現(xiàn)在有三種不同的模式可供選擇：單個、多個或范圍選擇。在單模式下，用戶可以選擇一個日期，而在多模式下，用戶可以選擇多個日期，范圍模式允許用戶選擇給定范圍的第一個和最后一個日期。

官方還擴展了value選項，允許您不僅可以設(shè)置單個日期作為初始值，還可以設(shè)置日期數(shù)組。為了簡化calendar導(dǎo)航，還引入了一個electweekonclick選項，允許用戶通過單擊周數(shù)來選擇整個一周。

Tab/TabPanel — 垂直方向和圖標位置

這個EAP包括多個新的與Tab/TabPanel相關(guān)的功能。

對于Tab，我們添加了一個新的方向選項，允許您水平或垂直排列選項卡。

對于TabPanel，新tabsPosition選項允許您在面板的右側(cè)、左側(cè)、頂部和底部對齊選項卡。

Tabs 和 TabPanel現(xiàn)在都包含一個圖標位置選項，允許您定義圖標在選項卡中的顯示位置(開始，結(jié)束，頂部或底部位置)。

表單/編輯器 — 更改檢測(Dirty狀態(tài))

該EAP包括增強的編輯器和表單功能。

首先，官方將重置方法重命名為clear(為了跨組件的一致性)。為了維護重置功能，官方為編輯器引入了一種新的重置方法，允許您將值恢復(fù)到初始狀態(tài)。

類似地，官方還重命名(并棄用)了Form的resetValues方法，并引入了clear方法。為了維護整個表單的重置功能，引入了一個新的重置方法。

新版本還將介紹isDirty標志，它現(xiàn)在對編輯器和表單都可用。isDirty標志有助于確定表單項或編輯器是否發(fā)生了更改，它允許您在表單保持不變時禁用重置按鈕，從而消除不必要的操作。當用戶意外關(guān)閉表單時，也可以使用isDirty。在這種情況下，您可以提示用戶僅在進行修改時保存更改。

Form（表單） — 支持DateRangeBox

您現(xiàn)在可以使用editorType: 'dxDateRangeBox'將DateRangeBox組件添加到表單中。

<dxi-item
dataField="VacationDates"
editorType="dxDateRangeBox"
[editorOptions]="dateRangeBoxOptions"
>
</dxi-item>

增強Material主題功能

該EAP包括DevExtreme Material主題的以下更改：

• 為了解決與可訪問性相關(guān)的問題，Button組件的禁用狀態(tài)現(xiàn)在包含更高對比度的顏色組合。

• 官方更新了ButtonGroup組件的外觀，以確保與Google的Material設(shè)計指南保持一致。

• 不同的文本編輯器（類型）框現(xiàn)在是相同的高度，由于顏色組合的對比度更高，標簽和占位符元素的內(nèi)容也更容易訪問。

• DevExtreme Accordion組件中引入了多個更改，標題中的文本和圖標現(xiàn)在對齊了。旋轉(zhuǎn)圖標使用了對比度更高的顏色組合，組件的整體風(fēng)格更符合Google的Material設(shè)計指南。

可訪問性

官方將繼續(xù)在DevExtreme產(chǎn)品線中增強可訪問性支持，該EAP包括針對DevExpress數(shù)據(jù)網(wǎng)格的與對比度相關(guān)的增強。

使用WCAG和Section 508標準，官方還改善了使用屏幕閱讀器的個人閱讀體驗。像讀取驗證消息這樣的增強功能現(xiàn)在可以在各種組件中使用，比如DevExtreme DataGrid、HtmlEditor、DropDownBox、NumberBox和DateBox。

注意：為了幫助隔離/解決與可訪問性相關(guān)的問題，官方使用了多種工具，包括aXe、Lighthouse和WAVE。