1.Angular Material

Angular Material 是由 Google 開(kāi)發(fā)的一款工具，是適合與 Angular 框架一起使用的 UI/UX 組件庫(kù)。Angular Material 提供功能性 UI 組件、樣式和動(dòng)畫，以創(chuàng)建專業(yè)和現(xiàn)代化的界面。組件包括表單元素、導(dǎo)航元素、數(shù)據(jù)表和圖形等功能。Angular Material 可幫助您為 Angular 應(yīng)用程序創(chuàng)建高質(zhì)量且移動(dòng)友好的界面。

吸引用戶并訪問(wèn)應(yīng)用程序中可用的項(xiàng)目或組件。它還可以幫助我們?cè)O(shè)計(jì)具有獨(dú)特樣式和形狀的應(yīng)用程序。

這些組件使應(yīng)用程序或網(wǎng)站更加一致，并使設(shè)計(jì)具有響應(yīng)性。它將成功設(shè)計(jì)的經(jīng)典原則與創(chuàng)新和技術(shù)相結(jié)合。

谷歌于 2014 年開(kāi)發(fā)了 Angular Material。當(dāng)時(shí)，它被標(biāo)記為 AngularJS，旨在使應(yīng)用程序更具吸引力和更快的性能。谷歌從頭開(kāi)始重寫代碼并刪除了 JS，然后在 2016 年 9 月將其命名為 Angular Material。UI/UX 組件被稱為 Angular Materials。

安裝

您可以使用 NPM 或 Yarn 安裝 Angular Material，如下所示。

// with npm
npm i @angular/material


// with yarn
yarn add @angular/material

2.NGX  Bootstrap

NGX Bootstrap 是 Angular 框架的 UI 組件庫(kù)。它為 Angular 應(yīng)用程序適配了 Bootstrap 4 風(fēng)格，并為 Angular 應(yīng)用程序提供了強(qiáng)大而靈活的 UI 組件。NGX Bootstrap 包括流行的 UI 組件，例如模態(tài)窗口、旋轉(zhuǎn)木馬、下拉菜單、選項(xiàng)卡、警報(bào)和 toast 通知。Angular 開(kāi)發(fā)人員經(jīng)常首選它，因?yàn)樗子谑褂煤团渲谩?/p>

所有組件均采用模塊化設(shè)計(jì)。自定義模板，樣式可以輕松應(yīng)用。

所有組件都是可擴(kuò)展和適應(yīng)性強(qiáng)的，并且在桌面和移動(dòng)設(shè)備上以相同的易用性和性能工作。

• 所有組件都使用最新的代碼維護(hù)和可讀性風(fēng)格指南和準(zhǔn)則。
• 所有組件都經(jīng)過(guò)全面的單元測(cè)試，并支持最新的角度版本。
• 所有組件都有豐富的文檔和良好的編寫。
• 所有組件都有多個(gè)工作演示來(lái)展示多種類型的功能。

ngx bootstrap 是一個(gè)開(kāi)源項(xiàng)目。由麻省理工學(xué)院許可證支持。

安裝

您可以使用 NPM 或 Yarn 安裝 NGX Bootstrap，如下所示。

// with npm
npm i ngx-bootstrap


// with yarn
yarn add ngx-bootstrap

3.NG Bootstrap

ng-bootstrap 是一個(gè)開(kāi)源存儲(chǔ)庫(kù)，它提供了幾個(gè)使用 Bootstrap 4 CSS 構(gòu)建的原生 Angular 小部件。如您所知，Bootstrap 是最流行的 CSS 框架之一，用于使用 HTML、CSS 和 JavaScript 庫(kù)創(chuàng)建時(shí)尚現(xiàn)代的應(yīng)用程序。

要在 Angular 應(yīng)用程序中使用 Bootstrap 框架，我們之前必須使用 bootstrap CSS 和 JavaScript 文件，但是“ng-bootstrap”為我們提供了在 Angular 應(yīng)用程序中沒(méi)有任何 JS 文件的情況下使用它的最佳方法。

“ng-bootstrap”提供了一個(gè)可以加載到我們的 Angular 應(yīng)用程序中的模塊，它為我們提供了原生的 Angular 組件和小部件，我們可以在使用其他 Angular 提供的組件或我們的自定義組件時(shí)使用它們。

由于“ng-bootstrap”是一個(gè)封裝了所有 Bootstrap 功能的模塊，因此無(wú)需在我們的 Angular 應(yīng)用程序中使用任何其他第三方庫(kù)。因此，不依賴于 jQuery 甚至 Bootstrap 的 JavaScript 庫(kù)。

Bootstrap 4.0.0（僅 CSS 文件，不需要 Bootstrap.js 和 Bootstrap.min.js）Angular 4+ 和 Bootstrap 4.0.0 都支持所有瀏覽器，具有 CSS 支持的相同瀏覽器交集。

多種小部件可供選擇，包括所有 Bootstrap 小部件。

開(kāi)發(fā)人員可以使用 Bootstrap 組件，如模式、輪播、進(jìn)度條等。

對(duì) Angular 有基本的了解就足以使用 NG Bootstrap。

組件輕巧且響應(yīng)迅速。

該庫(kù)不依賴于其他依賴項(xiàng)。

所有組件都經(jīng)過(guò) 100% 覆蓋率測(cè)試。

大型社區(qū)支持。

安裝

您可以使用 NPM 或 Yarn 安裝 NG Bootstrap，如下所示。

// with npm
npm i @ng-bootstrap/ng-bootstrap 


// with yarn
yarn add @ng-bootstrap/ng-bootstrap

4.Angular 的 Onsen UI

Angular 的 Onsen UI 是 Angular 框架的 UI 組件庫(kù)。它針對(duì)移動(dòng)應(yīng)用程序進(jìn)行了優(yōu)化，并使用 HTML5 和 CSS 技術(shù)進(jìn)行設(shè)計(jì)。Angular 的 Onsen UI 為 Angular 應(yīng)用程序提供移動(dòng)友好且功能強(qiáng)大的 UI 組件，但也可用于桌面瀏覽器。組件包括流行的 UI 組件，例如，導(dǎo)航元素、表單元素、選項(xiàng)卡、模態(tài)窗口和 toast 通知。Angular 的 Onsen UI 是一個(gè)選項(xiàng)，它具有簡(jiǎn)單易用的 API，可以與 Angular 一起使用。

Onsen UI 是獨(dú)立于框架的，這意味著開(kāi)發(fā)人員可以使用或不使用任何 JavaScript 框架來(lái)創(chuàng)建應(yīng)用程序。Onsen UI 還包括額外的連接器包，使其 API 易于與流行的框架一起使用，例如：

• React
• Vue
• AngularJS1
• Angular 2+

Onsen UI 針對(duì)移動(dòng)設(shè)備進(jìn)行了性能優(yōu)化，因此,適用于移動(dòng) Web 應(yīng)用程序開(kāi)發(fā)。

安裝

您可以使用 NPM 輕松安裝 Onsen UI，如下所示。

// with npm
npm install onsenui ngx-onsenui --save

5.PrimeNG

PrimeNG 是 Angular 框架的 UI 組件庫(kù)。PrimeNG 為 Angular 應(yīng)用程序提供專業(yè)和多功能的 UI 組件。組件包括數(shù)據(jù)表、圖表、滑塊、下拉列表、選項(xiàng)卡、燈箱、樹和許多其他功能性 UI 組件。PrimeNG 旨在提高 Angular 應(yīng)用程序的性能和用戶體驗(yàn)，并且易于配置。它還可以與 Angular 一起使用，并提供主題支持。

• 超過(guò) 80 種不同的組件。
• 主題設(shè)計(jì)器可讓您創(chuàng)建自己的主題。
• 任何人都可以輕松開(kāi)始使用 PrimeNG 提供的專業(yè)設(shè)計(jì)、可定制的模板。
• 200 多個(gè)圖標(biāo)。
• 280 多個(gè) UI 塊。
• 它不斷更新。如果出現(xiàn)任何問(wèn)題，可以迅速解決。

安裝

您可以使用 NPM 或 Yarn 安裝 PrimeNG，如下所示。

// with npm
npm i primeng


// with yarn
yarn add primeng

6.NG Lightning 

NG Lightning 是一個(gè)流行的用于 Salesforce 開(kāi)發(fā)的 Angular 組件庫(kù)。該庫(kù)依靠輸入功能為最終用戶提供更好的性能。它建立在原生 Angular 組件和閃電設(shè)計(jì)系統(tǒng)之上。

• 它專注于改進(jìn)性能和更大的開(kāi)發(fā)靈活性。
• Angular 和 Salesforce 開(kāi)發(fā)方面的專家。
• 用 TypeScript 編寫。

安裝

您可以使用 NPM 安裝 NG Lightning，如下所示。

npm install --save ng-lightning

7. Syncfusion Angular UI 

Syncfusion Angular UI (Essential JS 2) 是基于現(xiàn)代 TypeScript 的真正 Angular 組件的集合。它具有提前 (AOT) 編譯和 Tree-Shaking 支持。所有組件都是從頭開(kāi)始開(kāi)發(fā)的，具有輕便、響應(yīng)迅速、模塊化和觸摸友好的特點(diǎn)。

• 為了便于選擇性引用，所有組件都設(shè)計(jì)為模塊。
• 這些組件支持觸控，適用于多種設(shè)備，從而帶來(lái)出色的用戶體驗(yàn)。
• 全球受眾可以使用各種語(yǔ)言和文化的組件。
• 輕的。

安裝

您可以通過(guò) NPM 安裝所需的包。

npm i @syncfusion/ej2-angular-base

8. Clarity

Clarity Design System 是一個(gè)開(kāi)源項(xiàng)目，它將 UX 指南、HTML/CSS 框架和 Angular 組件結(jié)合在一起，共同創(chuàng)造非凡的體驗(yàn)。

可擴(kuò)展和可定制的組件。

它可以用于任何 web 應(yīng)用程序，無(wú)論 JavaScript 框架如何。

它提供了一組精心設(shè)計(jì)和實(shí)現(xiàn)的數(shù)據(jù)綁定組件。

安裝

您可以使用 NPM 安裝 Clarity，如下所示。

// with npm
npm i @clr/angular

9.Vaadin UI組件

Vaadin 是一個(gè)用于構(gòu)建 Web 應(yīng)用程序的 Java 框架，它提供了廣泛的 UI 組件，用于構(gòu)建響應(yīng)迅速且用戶友好的界面。一些最常用的 Vaadin UI 組件包括：

• TextField：用于輸入和顯示文本
• Button：用于觸發(fā)動(dòng)作
• ComboBox：用于從選項(xiàng)的下拉列表中進(jìn)行選擇
• Grid：用于顯示和操作表格數(shù)據(jù)
• TreeGrid：用于顯示分層數(shù)據(jù)
• Chart：用于創(chuàng)建交互式圖表和圖形
• TabSheet：用于將內(nèi)容組織到選項(xiàng)卡中
• SplitPanel：用于將 UI 劃分為多個(gè)可調(diào)整大小的區(qū)域

這些組件是高度可定制的，并且可以使用 CSS 設(shè)置樣式以匹配您的應(yīng)用程序的外觀。

• 響應(yīng)式布局。
• 您自己有良好的設(shè)計(jì)系統(tǒng)的基礎(chǔ)。
• 使用常見(jiàn)的輔助技術(shù)進(jìn)行手動(dòng)測(cè)試。
• 它快速、安全地處理服務(wù)器-客戶端通信和路由。
• 提供鍵盤導(dǎo)航和屏幕閱讀器支持。

安裝

您可以使用 NPM 安裝 Vaadin，如下所示。

// with npm
npm i @vaadin/vaadin-grid

10.Nebular 

Nebular 是由 Akveo 調(diào)用的 UI Kit。它在 Angular 框架上運(yùn)行，并提供一組現(xiàn)成的組件、主題和工具來(lái)創(chuàng)建用戶輸出。Nebular 可幫助您為當(dāng)前的 Web 應(yīng)用程序創(chuàng)建現(xiàn)代且令人印象深刻的結(jié)果。此外，Nebular 和 Angular 都易于配置和學(xué)習(xí)。

• 認(rèn)證層。
• 出色的社區(qū)支持。
• 組件具有可配置的樣式。
• 基于EVA設(shè)計(jì)系統(tǒng)實(shí)現(xiàn)。

安裝

您可以使用 NPM 安裝 Nebular，如下所示。

//with npm
npm i node-teradata

結(jié)論

在寫這篇文章之前，我有使用其中許多庫(kù)的經(jīng)驗(yàn)。在這些庫(kù)中，對(duì)我來(lái)說(shuō)最好的是 primeNG 庫(kù)。其他庫(kù)也很好，也很成功，但我個(gè)人認(rèn)為 primeNG 庫(kù)有更好、更有條理的處理來(lái)源，所以它引起了開(kāi)發(fā)者對(duì)它們一些興趣。