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