你還在愁著找不到與框架無關(guān)的網(wǎng)頁組件嗎?本文將讓你大有收獲。
網(wǎng)頁組件包含各種常用的界面組件，如:表格、樹、聯(lián)動下拉框等，可輕松構(gòu)造出令人耳目一新的，具有RIA （Rich Internet Application） 特征的Web 應(yīng)用界面。根據(jù)定義，所有web組件都是可互操作的，可以很好地與其他組件協(xié)作。
自定義組件和小部件建立在網(wǎng)頁組件標(biāo)準(zhǔn)之上，可以跨現(xiàn)代瀏覽器工作，并且可以與任何與HTML一起工作的JavaScript庫或框架一起使用。
那么現(xiàn)在網(wǎng)上有哪些現(xiàn)成的網(wǎng)頁組件庫科研使用呢?下面為大家提供了9個不錯的組件庫，希望能對你有所幫助。
1. Material
谷歌的Material-components-web庫是Material-UI庫的web組件版本。這些Web組件可以整合到廣泛的上下文和框架中。
網(wǎng)址:https://github.com/material-components/material-components-web-components
2. Polymer elements
谷歌的Polymer庫支持構(gòu)建封裝的、可重用的Web組件，它們的工作方式類似于標(biāo)準(zhǔn)的HTML元素，用起來跟導(dǎo)入和使用任何其他HTML元素一樣簡單。Polymer elements是一個GitHub組織，包含超過100個可重復(fù)使用的Polymer組件，作為獨(dú)立存儲庫，大家可以瀏覽和使用現(xiàn)成的組件。例子:
<!-- Import a component --> <script src="https://unpkg.com/@polymer/paper-checkbox@next/paper-checkbox.js?module" type="module" ></script> <!-- Use it like any other HTML element --> <paper-checkbox>Web Components!</paper-checkbox>
網(wǎng)址:https://github.com/PolymerElements?page=3
3. Vaadin
這是一個相當(dāng)新的庫，包含一組近30個正在發(fā)展的開源web組件，適用于構(gòu)建跨現(xiàn)代瀏覽器的移動和桌面web應(yīng)用程序的UI。這個庫比較活躍的，值得大家持續(xù)關(guān)注。
網(wǎng)址:https://github.com/vaadin/vaadin
4. Wired elements
Wired elements是擁有一個7千個手繪元素集合。這些元素是為線框圖而建，繪制的元素使得沒有任何兩個渲染圖是完全相同的——就像兩個獨(dú)立的手繪形狀。
網(wǎng)址:https://github.com/rough-stuff/wired-elements
5、Elix
Elix是一個社區(qū)驅(qū)動的可重用且可定制web組件集，用于通用UI模式。為了確保高質(zhì)量的標(biāo)準(zhǔn)，組件是根據(jù)web組件的黃金標(biāo)準(zhǔn)清單（Gold Standard checklist）來衡量的。
網(wǎng)址：https://github.com/elix/elix
6. Time elements
<local-time datetime="2014-04-01T16:30:00-08:00"> April1，20144:30pm </local-time> -- <local-time datetime="2014-04-01T16:30:00-08:00"> 1Apr201421:30 </local-time>
這個比較老的組件的庫，它提供了標(biāo)準(zhǔn)HTML <time> 元素的自定義子類型。通過將時間戳格式化為本地化字符串或在用戶瀏覽器中自動更新的相對文本，可以創(chuàng)建自定義擴(kuò)展方便在任何地方使用。
網(wǎng)址:https://github.com/github/time-elements
7.UI5-webcomponents
這個庫由SAP的UI5構(gòu)建，是一組輕量級的、可重用的、獨(dú)立的UI元素。這些組件并不是建立在UI5之上，而是獨(dú)立的元素。支持跨框架和應(yīng)用程序使用。組件的設(shè)計與SAP Fiori設(shè)計指南一致，并融入了Fiori3設(shè)計。
網(wǎng)址:https://github.com/SAP/ui5-webcomponents
8.Patternfly
運(yùn)行演示:
git clone [email protected]:patternfly/patternfly-elements.git cd patternfly-elements npm install # this will take a while due to lerna bootstrap npm run storybook
PatternFly Elements擁有近20個靈活和輕量級Web組件的集合，以及構(gòu)建它們的工具。PatternFly元素的大小和樣板都是輕量級的（這是web組件的標(biāo)準(zhǔn)），適用于React、 Vue、 Angular、 vanilla JS以及任何HTML元素。
網(wǎng)址:https://github.com/patternfly/patternfly-elements
9. Web components org
這不是一個庫，而是圍繞Polymer元素建立的谷歌的web組件門戶網(wǎng)站。推薦這個網(wǎng)站是因為這是一個更新Polymer團(tuán)隊新web組件的有用方法，并且在開始使用web組件時提供了一些有用的閱讀資源。
網(wǎng)址:https://www.webcomponents.org/
文章經(jīng)編譯，英文原文可點(diǎn)擊這里閱讀。
