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的位置。

要顯示堆疊的訊息，呼叫notify(message, stack)或notify(options, stack) 方法：

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 - 指定當使用者拖動元件的角柄時，是否保持元件的縱橫比。

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

• area - 指定用於限制元件的最大大小的邊界區域。

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

動態驗證摘要

考慮以下用例：開發者需要使用一組元件生效，可以附加一個

要將Summary重新繫結到組，可以使用refreshValidationGroup()方法。

切換開啟的彈出視窗

彈出式UI可以更好地處理多個彈出式視窗同時可見的使用場景(彈出式視窗相互重疊的例項)，使用者可以通過與彈出視窗的互動(點選或移動)將彈出視窗從後面移到前面：

浮動標籤

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

要新增浮動標籤，請指定以下屬性：

• 為 label 屬性指定一個註釋。
• 將labelMode 屬性設定為“floating”。

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

更多DevExpress線上公開課、中文教程資訊請上中文網獲取