DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現代Web開發堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建交互式的Web應用程序，該套件附帶功能齊全的數據網格、交互式圖表小部件、數據編輯器等。

在本文中，我們將為大家介紹DevExtreme的幾個多用途JavaScript UI組件（針對Angular、React、Vue和jQuery），并簡要記錄在過去發布的一些新版中引入的新功能。

DevExtreme v22.1正式版下載

DevExpress技術交流群6：600715373      歡迎一起進群討論

通知堆棧

在以前的版本中，我們提供了兩種調用toast通知的方法，如果應用程序同時調用這些方法，通知就會相互重疊。在v22.1中，有兩個新的通知方法允許開發者堆疊toast通知，除了把toast通知堆疊在另一個上面，還可以改變堆疊的方向和toast的位置。

要顯示堆疊的消息，調用或 方法：

import { Component, AfterViewInit } from '@angular/core';
import notify from 'devextreme/ui/notify';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})

export class AppComponent implements AfterViewInit {
ngAfterViewInit() {
notify("Warning message", {"center", "up-push"});
// or
notify({ message: "Error message", width: 300, shading: true }, {"center", "up-push"});
}
}

用固定長寬比調整大小

Resizable組件提供了兩個新選項：

• - 指定當用戶拖動組件的角柄時，是否保持組件的縱橫比。

在調整圖片和視頻的大小時，keepAspectRatio模式最有用。開發者可以使用Resizable組件來控制DataGrid或其他儀表板小部件的大小。

• - 指定用于限制組件的最大大小的邊界區域。

<dx-resizable ...
[keepAspectRatio]="false"
area="#container"
>
</dx-resizable>

動態驗證摘要

考慮以下用例：開發者需要使用一組組件生效，可以附加一個，它在該組的列表中顯示所有驗證錯誤。然后在某個時候，開發者需要動態地更改/重新創建應用程序中的驗證組。

要將Summary重新綁定到組，可以使用方法。

切換打開的彈出窗口

彈出式UI可以更好地處理多個彈出式窗口同時可見的使用場景(彈出式窗口相互重疊的實例)，用戶可以通過與彈出窗口的交互(點擊或移動)將彈出窗口從后面移到前面：

浮動標簽

所有編輯器組件(自動完成、顏色框、下拉框、日期框、表單、查找、數字框、選擇框、標記框、文本區、文本框)都支持浮動標簽，標簽用作占位符，當編輯器獲得焦點時，標簽移動到輸入字段上方的位置。

要添加浮動標簽，請指定以下屬性：

• 為 屬性指定一個注釋。
• 將 屬性設置為“floating”。

<dx-text-box...
label="Email"
labelMode="floating"
>
</dx-text-box>