【51CTO.com快譯】作為目前流行的JavaScript Web框架之一，Angular通過將各項(xiàng)服務(wù)的執(zhí)行過程隱藏到框架深處，以便為開發(fā)人員提供基于各種內(nèi)部機(jī)制(internal mechanisms)的構(gòu)建工具。和React類似，Angular鼓勵(lì)用戶使用各種組件，將應(yīng)用程序接口(API)拆分為可重用的多個(gè)小塊。

下面，我們將列出十二種當(dāng)前流行的Angular UI庫列表。雖然它們中的大多數(shù)都是為Angular2+設(shè)計(jì)的，但是其中也一些可以適用于較舊的框架版本。而且，它們的優(yōu)點(diǎn)是，您可以從這些Angular庫中提取單個(gè)組件，用到自己的項(xiàng)目中，而無需安裝整個(gè)代碼庫。

1. Clarity

由VMware創(chuàng)建的開源設(shè)計(jì)系統(tǒng)Clarity，在GitHub上擁有6.2千顆星。它是由UX設(shè)計(jì)指南、HTML/CSS框架、以及Angular組件所組成。Clarity為開發(fā)人員提供了一組具有高性能數(shù)據(jù)綁定(data-bound)的組件。如下圖所示，該代碼庫可以實(shí)現(xiàn)諸如：手風(fēng)琴式折疊組件、日期選擇器、登錄名、指示牌、時(shí)間軸、切換鍵等大量交互式元素。

Clarity庫的視覺效果組件(來源：https://clarity.design/)

Clarity庫的登錄組件(來源：https://clarity.design/)

Clarity庫的時(shí)間軸組件(來源：https://clarity.design/)

2. Material

作為Angular的官方組件庫，Material實(shí)現(xiàn)了Google的材料設(shè)計(jì)語言(Material Design)的概念。它在GitHub上擁有2.12萬顆星。作為一種UI組件代碼的示例，Material是根據(jù)Angular開發(fā)團(tuán)隊(duì)的指南編寫而成。用戶可以通過此類代碼庫，實(shí)現(xiàn)包括自動(dòng)完成、表單字段、進(jìn)度微調(diào)器、滑動(dòng)塊(Slider)、步進(jìn)式導(dǎo)航(stepper)、以及選項(xiàng)卡在內(nèi)的交互式元素。

Material的視覺效果組件庫(來源：https://material.angular.io/)

3. NGX Bootstrap

NGX Bootstrap庫在GitHub上擁有5.3千顆星。由它提供的基本組件，實(shí)現(xiàn)了專為Angular編寫的Bootstrap模板功能。它旨在讓用戶設(shè)計(jì)出具有可擴(kuò)展性和適應(yīng)能力的PC與移動(dòng)類應(yīng)用。憑借著由其提供的多​​種元素形式，用戶可以通過該代碼庫，將各種自定義的HTML(如下圖所示)、各種手風(fēng)琴式折疊組件、輪播組件(carousel)、分頁與翻頁組件(pager pagination)等元素，添加到自己的應(yīng)用中。

NGX Bootstrap庫的自定義HTML組件(來源： https://valor-software.com/ngx-bootstrap/)

[[393438]]

NGX Bootstrap庫的基本輪播組件(來源： https://valor-software.com/ngx-bootstrap/)

4. Prime NG

Prime NG是一個(gè)包含了70多個(gè)UI組件的集合庫。同時(shí)，它能夠提供諸如“材料設(shè)計(jì)”和“平面設(shè)計(jì)(Flat Design)”等不同類型的樣式。Prime NG在GitHub上擁有約6.6千顆星，并正在被eBay、Fox等公司所使用。該代碼庫可以提供：不同形式的字段、各種按鈕、菜單格式、消息、彩色塊突顯(toasts)、以及時(shí)間軸等功能。

 

Prime NG庫的組合輸入域(Fields of Field)組件(來源： https: //www.primefaces.org/primeng/)

Prime NG庫的按鈕組件形式(來源： https://www.primefaces.org/primeng/)

Prime NG庫的菜單組件形式(來源： https://www.primefaces.org/primeng/)

Prime NG庫的消息、彩色塊突顯和時(shí)間軸組件(來源： https://www.primefaces.org/primeng/)

5. NG Bootstrap

時(shí)下流行庫NG Bootstrap包括了許多可用于Angular Bootstrap 4樣式的組件。由于它代替了不再被支持的Angular-UI Bootstrap項(xiàng)目，因此它在GitHub上擁有大約7.7千顆星。NG Bootstrap具有較高的測(cè)試覆蓋率，并且沒有對(duì)第三方JS的依賴項(xiàng)。目前，它自帶有各種日期選擇器、進(jìn)度條、基本表格樣式、以及不同的彩色塊突顯等功能選項(xiàng)。

NG Bootstrap庫的日期選擇器組件(來源： https://ng-bootstrap.github.io/)

NG Bootstrap庫的進(jìn)度條組件(源： https: //ng-bootstrap.github.io/)

NG Bootstrap庫的表組件(源： https: //ng-bootstrap.github.io/)

NG Bootstrap庫的彩色塊突顯組件(來源： https://ng-bootstrap.github.io/)

6. Teradata Covalent UI Platform

Teradata Covalent UI Platform在GitHub上擁有2.2萬顆星。該代碼庫通過樣式指南和設(shè)計(jì)模式，以方便用戶閱讀代碼。得益于該平臺(tái)的配置，開發(fā)人員可以更關(guān)注應(yīng)用程序的定制功能，進(jìn)而加快開發(fā)的進(jìn)程。

該平臺(tái)成功地遵循了原子設(shè)計(jì)原理(Atomic Design Principles)--在模塊化設(shè)計(jì)中，將較小的組件組​​合成較大的組件。它以此為例，將各個(gè)按鈕合理地組合起來。此外，它還提供了用戶配置文件、面包屑層次導(dǎo)航(breadcrumbs)，步進(jìn)式導(dǎo)航、以及文本編輯器等功能。

 

Teradata Covalent UI Platform的用戶配置文件組件(來源： https: //teradata.github.io/covalent/v3/#/)

Teradata Covalent UI Platform庫的步進(jìn)式導(dǎo)航組件(來源： https: //teradata.github.io/covalent/v3/#/)

Teradata Covalent UI Platform庫的文本編輯器組件(來源： https: //teradata.github.io/covalent/v3/#/)

7. Nebular

作為一個(gè)可自定義的組件庫，Nebular在GitHub上擁有6.9千顆星。由于具有六種視覺效果主題和可自定義的組件，因此它能夠大幅簡化應(yīng)用程序的開發(fā)過程。值得一提的是，Nebular具有為API提供身份驗(yàn)證和安全層的模塊，同時(shí)也能夠提供諸如：步進(jìn)式導(dǎo)航、下拉列表菜單、聊天組件、以及注冊(cè)表單等功能。

Nebular庫的步進(jìn)式導(dǎo)航組件(來源： https://akveo.github.io/nebular/ )

Nebular庫的下拉列表菜單組件(來源： https://akveo.github.io/nebular/ )

Nebular庫的聊天組件(來源： https://akveo.github.io/nebular/ )

Nebular庫的注冊(cè)表單組件(來源： https://akveo.github.io/nebular/ )

8. Onsen UI

Onsen UI庫方便了用戶使用JavaScript，來開發(fā)適合Android和iOS平臺(tái)的移動(dòng)混合應(yīng)用。該代碼庫在GitHub上擁有8.3千顆星標(biāo)。它通過各種綁定，以提供不同的視覺效果樣式。此外，Onsen UI還提供動(dòng)作菜單(action sheet)、警告對(duì)話框(alert dialog)、各種按鈕、以及彈窗(Popover)等功能。

Onsen UI庫的動(dòng)作菜單組件(來源： https://onsen.io/angular2/)

Onsen UI庫的警告對(duì)話框組件(來源： https://onsen.io/angular2/)

Onsen UI庫的按鈕組件形式(來源： https://onsen.io/angular2/)

Onsen UI庫的彈窗組件(來源： https://onsen.io/angular2/ )

9. NG-Zorro

全面支持TypeScript的NG-Zorro，旨在為開發(fā)人員提供，可用于創(chuàng)建Ant Design風(fēng)格界面(譯者注：這是由螞蟻金服開發(fā)和正在使用的一套企業(yè)級(jí)的前端設(shè)計(jì)語言和基于React的前端框架實(shí)現(xiàn))的各種高端組件。值得一提的是，該代碼庫是由咱們中國開發(fā)者創(chuàng)建的，而且在GitHub上擁有7.4千顆星。目前，它能夠提供包括菜單欄、頁面標(biāo)題、滑塊、以及頭像制作(Avatar)等多項(xiàng)功能。

NG-Zorro庫的各種頁面標(biāo)題組件形式(來源： https://ng.ant.design/docs/introduce/zh-CN)

NG-Zorro庫的各種滑塊組件形式(來源： https://ng.ant.design/docs/introduce/zh-CN)

NG-Zorro庫的各種頭像制作組件形式(來源： https://ng.ant.design/docs/introduce/zh-CN)

10. Vaadin

Vaadin庫提供的視覺元素，旨在彌合Angular組件和Polymer元素之間的差距。該代碼庫不但支持材料設(shè)計(jì)，而且包含了適用于移動(dòng)和桌面開發(fā)的各種組件。當(dāng)然，這些組件會(huì)被單獨(dú)地存儲(chǔ)在不同的存儲(chǔ)庫中。Vaadin提供了拆分布局(split layout)、按鈕、應(yīng)用布局(App Layout)、以及上傳表單等功能。

Vaadin庫的應(yīng)用布局組件(來源： https://vaadin.com/)

11. NG Semantic-UI

作為Angular應(yīng)用組件的NG Semantic-UI庫包括了27個(gè)組件。它不但基于時(shí)下流行的Semantic-UI前端方案，而且在GitHub上擁有大約1千顆星。NG Semantic-UI能夠提供諸如：卡片、加載器、手風(fēng)琴式折疊組件、以及各種菜單之類的工具。

NG Semantic-UI庫的卡片組件(來源： https: //ng-semantic.herokuapp.com/#/)

NG Semantic-UI庫的各種菜單組件形式(來源： https://ng-semantic.herokuapp.com/#/)

12. NG2 Charts

NG2 Charts庫在GitHub上擁有1.9千顆星。它為開發(fā)人員提供了用于創(chuàng)建六類圖表的Angular指令。由于其屬性基于chart.js，因此該代碼庫可用于呈現(xiàn)大型數(shù)據(jù)集和顯示列表。目前，它能夠支持各種折線圖、條狀圖、環(huán)形圖(Donut Chart)、雷達(dá)圖、餅圖、極坐標(biāo)區(qū)域圖、氣泡圖、以及散點(diǎn)圖(Scatter Chart)等。

NG2圖表庫的折線圖(來源： https://valor-software.com/ng2-charts/#/LineChart)

NG2圖表庫的條狀圖(來源： https://valor-software.com/ng2-charts/#/LineChart)

NG2 Charts庫的環(huán)形圖(來源： https: //valor-software.com/ng2-charts/#/LineChart)

NG2圖表庫的雷達(dá)圖(來源： https: //valor-software.com/ng2-charts/#/LineChart)

NG2圖表庫的餅圖(來源： https://valor-software.com/ng2-charts/#/LineChart)

NG2圖表庫的極坐標(biāo)區(qū)域圖(來源： https://valor-software.com/ng2-charts/#/LineChart)

NG2圖表庫的氣泡圖(來源： https://valor-software.com/ng2-charts/#/LineChart)

NG2圖表庫的散點(diǎn)圖(來源： https://valor-software.com/ng2-charts/#/LineChart)

原文標(biāo)題：The Most Popular Angular UI Libraries To Try in 2021，作者：Anastasia Kushnir

【51CTO譯稿，合作站點(diǎn)轉(zhuǎn)載請(qǐng)注明原文譯者和出處為51CTO.com】