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

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

DevExtreme v22.1正式版下載

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

通知堆棧

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

要顯示堆疊的消息，調(diào)用或 方法：

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"});
}
}

用固定長寬比調(diào)整大小

Resizable組件提供了兩個(gè)新選項(xiàng)：

• - 指定當(dāng)用戶拖動組件的角柄時(shí)，是否保持組件的縱橫比。

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

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

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

動態(tài)驗(yàn)證摘要

考慮以下用例：開發(fā)者需要使用一組組件生效，可以附加一個(gè)，它在該組的列表中顯示所有驗(yàn)證錯(cuò)誤。然后在某個(gè)時(shí)候，開發(fā)者需要?jiǎng)討B(tài)地更改/重新創(chuàng)建應(yīng)用程序中的驗(yàn)證組。

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

切換打開的彈出窗口

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

浮動標(biāo)簽

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

要添加浮動標(biāo)簽，請指定以下屬性：

• 為 屬性指定一個(gè)注釋。
• 將 屬性設(shè)置為“floating”。

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