你還在愁著找不到與框架無關的網頁組件嗎?本文將讓你大有收獲。
網頁組件包含各種常用的界面組件，如:表格、樹、聯動下拉框等，可輕松構造出令人耳目一新的，具有RIA （Rich Internet Application） 特征的Web 應用界面。根據定義，所有web組件都是可互操作的，可以很好地與其他組件協作。
自定義組件和小部件建立在網頁組件標準之上，可以跨現代瀏覽器工作，并且可以與任何與HTML一起工作的JavaScript庫或框架一起使用。
那么現在網上有哪些現成的網頁組件庫科研使用呢?下面為大家提供了9個不錯的組件庫，希望能對你有所幫助。
1. Material
谷歌的Material-components-web庫是Material-UI庫的web組件版本。這些Web組件可以整合到廣泛的上下文和框架中。
網址:https://github.com/material-components/material-components-web-components
2. Polymer elements
谷歌的Polymer庫支持構建封裝的、可重用的Web組件，它們的工作方式類似于標準的HTML元素，用起來跟導入和使用任何其他HTML元素一樣簡單。Polymer elements是一個GitHub組織，包含超過100個可重復使用的Polymer組件，作為獨立存儲庫，大家可以瀏覽和使用現成的組件。例子:
<!-- 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>
網址:https://github.com/PolymerElements?page=3
3. Vaadin
這是一個相當新的庫，包含一組近30個正在發展的開源web組件，適用于構建跨現代瀏覽器的移動和桌面web應用程序的UI。這個庫比較活躍的，值得大家持續關注。
網址:https://github.com/vaadin/vaadin
4. Wired elements
Wired elements是擁有一個7千個手繪元素集合。這些元素是為線框圖而建，繪制的元素使得沒有任何兩個渲染圖是完全相同的——就像兩個獨立的手繪形狀。
網址:https://github.com/rough-stuff/wired-elements
5、Elix
Elix是一個社區驅動的可重用且可定制web組件集，用于通用UI模式。為了確保高質量的標準，組件是根據web組件的黃金標準清單（Gold Standard checklist）來衡量的。
網址：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>
這個比較老的組件的庫，它提供了標準HTML <time> 元素的自定義子類型。通過將時間戳格式化為本地化字符串或在用戶瀏覽器中自動更新的相對文本，可以創建自定義擴展方便在任何地方使用。
網址:https://github.com/github/time-elements
7.UI5-webcomponents
這個庫由SAP的UI5構建，是一組輕量級的、可重用的、獨立的UI元素。這些組件并不是建立在UI5之上，而是獨立的元素。支持跨框架和應用程序使用。組件的設計與SAP Fiori設計指南一致，并融入了Fiori3設計。
網址:https://github.com/SAP/ui5-webcomponents
8.Patternfly
運行演示:
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組件的集合，以及構建它們的工具。PatternFly元素的大小和樣板都是輕量級的（這是web組件的標準），適用于React、 Vue、 Angular、 vanilla JS以及任何HTML元素。
網址:https://github.com/patternfly/patternfly-elements
9. Web components org
這不是一個庫，而是圍繞Polymer元素建立的谷歌的web組件門戶網站。推薦這個網站是因為這是一個更新Polymer團隊新web組件的有用方法，并且在開始使用web組件時提供了一些有用的閱讀資源。
網址:https://www.webcomponents.org/
文章經編譯，英文原文可點擊這里閱讀。
