建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
作為目前流行的JavaScript Web框架之一，Angular通過(guò)將各項(xiàng)服務(wù)的執(zhí)行過(guò)程隱藏到框架深處，以便為開(kāi)發(fā)人員提供基于各種內(nèi)部機(jī)制(internal mechanisms)的構(gòu)建工具。和React類(lèi)似，Angular鼓勵(lì)用戶(hù)使用各種組件，將應(yīng)用程序接口(API)拆分為可重用的多個(gè)小塊。
創(chuàng)新互聯(lián)-專(zhuān)業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性?xún)r(jià)比臨海網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式臨海網(wǎng)站制作公司更省心,省錢(qián),快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋臨海地區(qū)。費(fèi)用合理售后完善，十年實(shí)體公司更值得信賴(lài)。
下面，我們將列出十二種當(dāng)前流行的Angular UI庫(kù)列表。雖然它們中的大多數(shù)都是為Angular2+設(shè)計(jì)的，但是其中也一些可以適用于較舊的框架版本。而且，它們的優(yōu)點(diǎn)是，您可以從這些Angular庫(kù)中提取單個(gè)組件，用到自己的項(xiàng)目中，而無(wú)需安裝整個(gè)代碼庫(kù)。
1. Clarity
由VMware創(chuàng)建的開(kāi)源設(shè)計(jì)系統(tǒng)Clarity，在GitHub上擁有6.2千顆星。它是由UX設(shè)計(jì)指南、HTML/CSS框架、以及Angular組件所組成。Clarity為開(kāi)發(fā)人員提供了一組具有高性能數(shù)據(jù)綁定(data-bound)的組件。如下圖所示，該代碼庫(kù)可以實(shí)現(xiàn)諸如：手風(fēng)琴式折疊組件、日期選擇器、登錄名、指示牌、時(shí)間軸、切換鍵等大量交互式元素。
Clarity庫(kù)的視覺(jué)效果組件(來(lái)源：https://clarity.design/)
Clarity庫(kù)的登錄組件(來(lái)源：https://clarity.design/)
Clarity庫(kù)的時(shí)間軸組件(來(lái)源：https://clarity.design/)
2. Material
作為Angular的官方組件庫(kù)，Material實(shí)現(xiàn)了Google的材料設(shè)計(jì)語(yǔ)言(Material Design)的概念。它在GitHub上擁有2.12萬(wàn)顆星。作為一種UI組件代碼的示例，Material是根據(jù)Angular開(kāi)發(fā)團(tuán)隊(duì)的指南編寫(xiě)而成。用戶(hù)可以通過(guò)此類(lèi)代碼庫(kù)，實(shí)現(xiàn)包括自動(dòng)完成、表單字段、進(jìn)度微調(diào)器、滑動(dòng)塊(Slider)、步進(jìn)式導(dǎo)航(stepper)、以及選項(xiàng)卡在內(nèi)的交互式元素。
Material的視覺(jué)效果組件庫(kù)(來(lái)源：https://material.angular.io/)
3. NGX Bootstrap
NGX Bootstrap庫(kù)在GitHub上擁有5.3千顆星。由它提供的基本組件，實(shí)現(xiàn)了專(zhuān)為Angular編寫(xiě)的Bootstrap模板功能。它旨在讓用戶(hù)設(shè)計(jì)出具有可擴(kuò)展性和適應(yīng)能力的PC與移動(dòng)類(lèi)應(yīng)用。憑借著由其提供的多??種元素形式，用戶(hù)可以通過(guò)該代碼庫(kù)，將各種自定義的HTML(如下圖所示)、各種手風(fēng)琴式折疊組件、輪播組件(carousel)、分頁(yè)與翻頁(yè)組件(pager pagination)等元素，添加到自己的應(yīng)用中。
NGX Bootstrap庫(kù)的自定義HTML組件(來(lái)源： https://valor-software.com/ngx-bootstrap/)
NGX Bootstrap庫(kù)的基本輪播組件(來(lái)源： https://valor-software.com/ngx-bootstrap/)
4. Prime NG
Prime NG是一個(gè)包含了70多個(gè)UI組件的集合庫(kù)。同時(shí)，它能夠提供諸如“材料設(shè)計(jì)”和“平面設(shè)計(jì)(Flat Design)”等不同類(lèi)型的樣式。Prime NG在GitHub上擁有約6.6千顆星，并正在被eBay、Fox等公司所使用。該代碼庫(kù)可以提供：不同形式的字段、各種按鈕、菜單格式、消息、彩色塊突顯(toasts)、以及時(shí)間軸等功能。
Prime NG庫(kù)的組合輸入域(Fields of Field)組件(來(lái)源： https: //www.primefaces.org/primeng/)
Prime NG庫(kù)的按鈕組件形式(來(lái)源： https://www.primefaces.org/primeng/)
Prime NG庫(kù)的菜單組件形式(來(lái)源： https://www.primefaces.org/primeng/)
Prime NG庫(kù)的消息、彩色塊突顯和時(shí)間軸組件(來(lái)源： https://www.primefaces.org/primeng/)
5. NG Bootstrap
時(shí)下流行庫(kù)NG Bootstrap包括了許多可用于Angular Bootstrap 4樣式的組件。由于它代替了不再被支持的Angular-UI Bootstrap項(xiàng)目，因此它在GitHub上擁有大約7.7千顆星。NG Bootstrap具有較高的測(cè)試覆蓋率，并且沒(méi)有對(duì)第三方JS的依賴(lài)項(xiàng)。目前，它自帶有各種日期選擇器、進(jìn)度條、基本表格樣式、以及不同的彩色塊突顯等功能選項(xiàng)。
NG Bootstrap庫(kù)的日期選擇器組件(來(lái)源： https://ng-bootstrap.github.io/)
NG Bootstrap庫(kù)的進(jìn)度條組件(源： https: //ng-bootstrap.github.io/)
NG Bootstrap庫(kù)的表組件(源： https: //ng-bootstrap.github.io/)
NG Bootstrap庫(kù)的彩色塊突顯組件(來(lái)源： https://ng-bootstrap.github.io/)
6. Teradata Covalent UI Platform
Teradata Covalent UI Platform在GitHub上擁有2.2萬(wàn)顆星。該代碼庫(kù)通過(guò)樣式指南和設(shè)計(jì)模式，以方便用戶(hù)閱讀代碼。得益于該平臺(tái)的配置，開(kāi)發(fā)人員可以更關(guān)注應(yīng)用程序的定制功能，進(jìn)而加快開(kāi)發(fā)的進(jìn)程。
該平臺(tái)成功地遵循了原子設(shè)計(jì)原理(Atomic Design Principles)--在模塊化設(shè)計(jì)中，將較小的組件組??合成較大的組件。它以此為例，將各個(gè)按鈕合理地組合起來(lái)。此外，它還提供了用戶(hù)配置文件、面包屑層次導(dǎo)航(breadcrumbs)，步進(jìn)式導(dǎo)航、以及文本編輯器等功能。
Teradata Covalent UI Platform的用戶(hù)配置文件組件(來(lái)源： https: //teradata.github.io/covalent/v3/#/)
Teradata Covalent UI Platform庫(kù)的步進(jìn)式導(dǎo)航組件(來(lái)源： https: //teradata.github.io/covalent/v3/#/)
Teradata Covalent UI Platform庫(kù)的文本編輯器組件(來(lái)源： https: //teradata.github.io/covalent/v3/#/)
7. Nebular
作為一個(gè)可自定義的組件庫(kù)，Nebular在GitHub上擁有6.9千顆星。由于具有六種視覺(jué)效果主題和可自定義的組件，因此它能夠大幅簡(jiǎn)化應(yīng)用程序的開(kāi)發(fā)過(guò)程。值得一提的是，Nebular具有為API提供身份驗(yàn)證和安全層的模塊，同時(shí)也能夠提供諸如：步進(jìn)式導(dǎo)航、下拉列表菜單、聊天組件、以及注冊(cè)表單等功能。
Nebular庫(kù)的步進(jìn)式導(dǎo)航組件(來(lái)源： https://akveo.github.io/nebular/ )
Nebular庫(kù)的下拉列表菜單組件(來(lái)源： https://akveo.github.io/nebular/ )
Nebular庫(kù)的聊天組件(來(lái)源： https://akveo.github.io/nebular/ )
Nebular庫(kù)的注冊(cè)表單組件(來(lái)源： https://akveo.github.io/nebular/ )
8. Onsen UI
Onsen UI庫(kù)方便了用戶(hù)使用JavaScript，來(lái)開(kāi)發(fā)適合Android和iOS平臺(tái)的移動(dòng)混合應(yīng)用。該代碼庫(kù)在GitHub上擁有8.3千顆星標(biāo)。它通過(guò)各種綁定，以提供不同的視覺(jué)效果樣式。此外，Onsen UI還提供動(dòng)作菜單(action sheet)、警告對(duì)話框(alert dialog)、各種按鈕、以及彈窗(Popover)等功能。
Onsen UI庫(kù)的動(dòng)作菜單組件(來(lái)源： https://onsen.io/angular2/)
Onsen UI庫(kù)的警告對(duì)話框組件(來(lái)源： https://onsen.io/angular2/)
Onsen UI庫(kù)的按鈕組件形式(來(lái)源： https://onsen.io/angular2/)
Onsen UI庫(kù)的彈窗組件(來(lái)源： https://onsen.io/angular2/ )
9. NG-Zorro
全面支持TypeScript的NG-Zorro，旨在為開(kāi)發(fā)人員提供，可用于創(chuàng)建Ant Design風(fēng)格界面(譯者注：這是由螞蟻金服開(kāi)發(fā)和正在使用的一套企業(yè)級(jí)的前端設(shè)計(jì)語(yǔ)言和基于React的前端框架實(shí)現(xiàn))的各種高端組件。值得一提的是，該代碼庫(kù)是由咱們中國(guó)開(kāi)發(fā)者創(chuàng)建的，而且在GitHub上擁有7.4千顆星。目前，它能夠提供包括菜單欄、頁(yè)面標(biāo)題、滑塊、以及頭像制作(Avatar)等多項(xiàng)功能。
NG-Zorro庫(kù)的各種頁(yè)面標(biāo)題組件形式(來(lái)源： https://ng.ant.design/docs/introduce/zh-CN)
NG-Zorro庫(kù)的各種滑塊組件形式(來(lái)源： https://ng.ant.design/docs/introduce/zh-CN)
NG-Zorro庫(kù)的各種頭像制作組件形式(來(lái)源： https://ng.ant.design/docs/introduce/zh-CN)
10. Vaadin
Vaadin庫(kù)提供的視覺(jué)元素，旨在彌合Angular組件和Polymer元素之間的差距。該代碼庫(kù)不但支持材料設(shè)計(jì)，而且包含了適用于移動(dòng)和桌面開(kāi)發(fā)的各種組件。當(dāng)然，這些組件會(huì)被單獨(dú)地存儲(chǔ)在不同的存儲(chǔ)庫(kù)中。Vaadin提供了拆分布局(split layout)、按鈕、應(yīng)用布局(App Layout)、以及上傳表單等功能。
Vaadin庫(kù)的應(yīng)用布局組件(來(lái)源： https://vaadin.com/)
11. NG Semantic-UI
作為Angular應(yīng)用組件的NG Semantic-UI庫(kù)包括了27個(gè)組件。它不但基于時(shí)下流行的Semantic-UI前端方案，而且在GitHub上擁有大約1千顆星。NG Semantic-UI能夠提供諸如：卡片、加載器、手風(fēng)琴式折疊組件、以及各種菜單之類(lèi)的工具。
NG Semantic-UI庫(kù)的卡片組件(來(lái)源： https: //ng-semantic.herokuapp.com/#/)
NG Semantic-UI庫(kù)的各種菜單組件形式(來(lái)源： https://ng-semantic.herokuapp.com/#/)
12. NG2 Charts
NG2 Charts庫(kù)在GitHub上擁有1.9千顆星。它為開(kāi)發(fā)人員提供了用于創(chuàng)建六類(lèi)圖表的Angular指令。由于其屬性基于chart.js，因此該代碼庫(kù)可用于呈現(xiàn)大型數(shù)據(jù)集和顯示列表。目前，它能夠支持各種折線圖、條狀圖、環(huán)形圖(Donut Chart)、雷達(dá)圖、餅圖、極坐標(biāo)區(qū)域圖、氣泡圖、以及散點(diǎn)圖(Scatter Chart)等。
NG2圖表庫(kù)的折線圖(來(lái)源： https://valor-software.com/ng2-charts/#/LineChart)
NG2圖表庫(kù)的條狀圖(來(lái)源： https://valor-software.com/ng2-charts/#/LineChart)
NG2 Charts庫(kù)的環(huán)形圖(來(lái)源： https: //valor-software.com/ng2-charts/#/LineChart)
NG2圖表庫(kù)的雷達(dá)圖(來(lái)源： https: //valor-software.com/ng2-charts/#/LineChart)
NG2圖表庫(kù)的餅圖(來(lái)源： https://valor-software.com/ng2-charts/#/LineChart)
NG2圖表庫(kù)的極坐標(biāo)區(qū)域圖(來(lái)源： https://valor-software.com/ng2-charts/#/LineChart)
NG2圖表庫(kù)的氣泡圖(來(lái)源： https://valor-software.com/ng2-charts/#/LineChart)
NG2圖表庫(kù)的散點(diǎn)圖(來(lái)源： https://valor-software.com/ng2-charts/#/LineChart)
文章題目：十二大流行的AngularUI庫(kù)
文章來(lái)源：http://fisionsoft.com.cn/article/djgdoio.html
