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

DevExpress技術交流群11：749942875      歡迎一起進群討論

本文中包含了DevExtreme v25.1官方發布的當前/預計的開發計劃，請注意此信息僅供參考，并不代表Developer Express Inc.的約束性承諾，下一個版本更新預計將在6月份更新，敬請期待~

安裝

如果您擁有一個激活的Universal或DXperience授權，可以通過DevExpress 或適當的包下載我們的EAP構建。

要開始使用DevExtreme v25.1 EAP構建，只需安裝目標框架相關的NPM包（標記為25.1-next tag），使用以下命令中的一個繼續：

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

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

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

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

早期訪問和CTP構建僅用于早期測試目的，不準備用于生產使用。此版本可以與DevExpress產品的其他主要版本并排安裝，請在安裝Early Access和CTP版本之前備份您的項目和其他重要數據。

Early Access Preview構建被認為是預發布軟件，您將在瀏覽器控制臺中看到W0022錯誤。

全新的Stepper組件

早期預覽版包含一個全新的Stepper UI組件，DevExtreme Stepper顯示進度，用戶通過一個序列移動。它非常適合多步驟過程，例如填充表單、登錄或應用程序向導。

DevExtreme Stepper支持以下功能/選項：

• 數據源集成
• 水平或垂直布局
• 導航模式（按順序步進或跳過）
• 預先確定的步驟
• 步驟指示器的自定義圖標或文本
• 步驟標題
• 可視化步驟驗證
• 可選和禁用的步驟
• 鍵盤導航
• 國際化(從右到左)

可以使用方向屬性指定Stepper是水平的還是垂直的，使用線性屬性將導航模式更改為線性或非線性，使用selectedIndex選項按索引預先選擇項，selectOnFocus選項確定在通過鍵盤聚焦時是否自動選擇項目。

您可以使用以下設置自定義每個步驟：

• icon: 在步驟指示器內設置一個圖標。
• text: 在步驟指示符中合并文本。
• title: 在步驟旁邊放置標題。
• isValid: 直觀地指示驗證狀態。
• optional: 可視化標記為可選的。
• disabled: 禁用步驟。
• hint: 添加瀏覽器內提示。

如果使用Angular來評估/測試EAP，建議使用新的配置組件：

<dx-stepper>
<dxi-stepper-item text="1"></dxi-stepper-item>
<dxi-stepper-item text="2" [optional]="true" ></dxi-stepper-item>
<dxi-stepper-item icon="gift"></dxi-stepper-item>
</dx-stepper>

Scheduler – 工具欄自定義

這個EAP版本為DevExtreme Scheduler引入一個可自定義的工具欄（可用于Angular、React、jQuery和Vue），這個新功能可用于向內置工具欄添加自定義項，如Today按鈕、新的約會按鈕或自定義資源選擇器。

指定工具欄屬性來包含所需的項，您可以設置每個項目的location（很像獨立工具欄），對于DevExtreme組件，指定associatedoptions，要引入獨特的元素，請使用自定義模板。

$('#scheduler').dxScheduler({
// ...
toolbar: {
items: [
// DevExtreme components: dxButton
{
location: 'before',
locateInMenu: 'auto',
widget: 'dxButton',
options: {
text: 'Today',
stylingMode: 'outlined',
type: 'normal',
onClick() {
scheduler.option('currentDate', new Date());
},
},
},
// Predefined toolbar's elements
'dateNavigator',
// Custom element
{
template: '<div>Custom Item</div>',
},
]
}
});

預定義項包括“dateNavigator”和“viewSwitcher”，如果沒有顯式指toolbar，則屏幕上顯示具有這兩個項目的默認工具欄。

您還可以切換“dateNavigator”中使用的按鈕順序，并決定在屏幕上顯示哪些按鈕。

toolbar: {
items: [
{
location: 'before',
name: 'dateNavigator',
options: {
items: ['dateInterval', 'prev', 'next'],
},
},
]
}

如果使用Angular來測試EAP，您必須在使用工具欄項時使用新的配置組件：

<dxo-scheduler-toolbar>
<dxi-scheduler-toolbar-item
name="dateNavigator"
location="before"
[options]="{items: ['dateInterval', 'prev', 'next']}">
</dxi-scheduler-toolbar-item>
</dxo-scheduler-toolbar>

更多產品資訊及授權，歡迎來電咨詢：023-68661681

關于慧都科技

慧都是?家?業數字化解決?案公司，專注于軟件、?油與?業領域，以深?的業務理解和?業經驗，幫助企業實現智能化轉型與持續競爭優勢。

慧都科技是DevExpress的中國區的合作伙伴，DevExpress作為用戶界面領域的優秀產品，幫助企業高效構建權限管理、數據可視化（如網格/圖表/儀表盤）、跨平臺系統（WinForms/ASP.NET/.NET MAUI）及行業定制解決方案，加速開發并強化交互體驗。