2021年你應該知道的9個網頁組件庫

2020-12-24 站長之家

你還在愁著找不到與框架無關的網頁組件嗎?本文將讓你大有收穫。

網頁組件包含各種常用的界面組件，如:表格、樹、聯動下拉框等，可輕鬆構造出令人耳目一新的，具有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 git@github.com:patternfly/patternfly-elements.gitcd patternfly-elementsnpm install # this will take a while due to lerna bootstrapnpm 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/

文章經站長之家編譯，英文原文可點擊這裡閱讀。

相關焦點

  • 前端組件/庫打包利器rollup使用與配置實戰
    本文轉載自【微信公眾號：趣談前端，ID:beautifulFront】經微信公眾號授權轉載，如需轉載與原文作者聯繫目前主流的前端框架vue和react都採用rollup來打包，為了探索rollup的奧妙，接下來就讓我們一步步來探索，並基於rollup搭建一個庫打包腳手架，來發布自己的庫和組件。
  • 2020年光伏組件行業研究報告
    根據我們測算，2019年矽料、矽片、電 池、組件四個環節單位產能固定資產投資分別為3.35億元、2.44億元、4.38億元、 1.87億元/GW，組件在四個製造環節中的產能投資強度最低，單位產能固定資產投 資佔比僅16.67%。
  • 2021年比較適合用於Web開發的7種程式語言
    2021 年將至，本文列舉了比較適合用於 Web 應用程式開發的Top7程式語言。1.PythonPython 是增長比較快的程式語言，Django 和 Pyramid 是比較受歡迎的Web開發框架。2018 年，Python 的人氣比上一年增長了 456%，並且還在持續增長。
  • 2019年網頁設計趨勢 - 完整版
    一個有吸引力和令人難忘的網頁可以吸引用戶的眼球，鼓勵觀眾發現更多有關您的品牌或訂購您的服務。分屏這種布局類型是我們在2018年觀察到的主要趨勢之一。分屏基本上是一個布局，其中網站被分成兩半：2個不同的圖像，有2個不同的意圖和CTA。
  • 2021 年最受歡迎的 20 個前端框架
    所以在 2021 年伊始，我們就來找點樂趣，讓這些庫好好較量一下吧。本文主要出於娛樂目的，在某種意義上說，會具有一定的參考意義。該怎麼對比呢？那就選出 20 個最受歡迎的 JavaScript 框架，並用 JS Framework Benchmark 來一場針鋒相對的大比拼如何？免責聲明：這篇評測主要是出於娛樂目的，可能也會有些實際價值。
  • 2021年這10種網頁設計流行趨勢值得關注!
    這篇設計趨勢分析的文章出自資深設計師 Lyudmil Enchev 之手，匯總了 2021 年在網頁設計領域值得注意的 10 個重要趨勢。雖然移動端設計在持續地繁榮發展，但是網頁設計依然是當下硬性的設計需求。相比於以往，網頁設計所面對的要求，其實越來越高，不僅要細緻到位，要功能全面，要能夠貼合趨勢，還要能兼顧桌面和移動端。
  • 又一款基於Vue的數據可視化組件庫,Github上star超1.4k,太酷炫
    組件庫名稱：DataV項目地址：https://github.com/DataV-Team/DataVDataV是一個基於Vue的數據可視化組件庫（當然也有React版本）提供用於提升頁面視覺效果的SVG邊框和裝飾提供常用的圖表如折線圖等飛線圖/輪播表等其他組件npm安裝$ npm install @jiaminghi/data-view使用import
  • 快速完成網頁設計,10個頂尖響應式HTML5網頁模板助你一臂之力
    5個最好的免費響應式HTML5網頁模板 -- 20181.你要知道，一個具有啟發性的令人驚嘆的免費HTML5網頁模板可以大大減少耗時並提高生產力。2.3個最好的免費Bootstrap網頁模板 -- 20181.
  • 風向標丨解讀2021年中核13GW組件招標細節,指向210、182,投標或激烈
    此次中核的大型集採項目中也能發現，未來電站市場，尤其是地面電站市場，一定是朝著大尺寸組件方向上發展，特別是大型國有企業、央企電站項目等對高效大組件的需求將逐步釋放，2021年的出貨會快速上升，這已毫無疑問。」 上述知情人士表示，「中核在此次集採中，對單晶組件、單晶雙面組件的選型，與項目所在地的條件或有一定關係。
  • Vue3 & React Hooks 新UI組件原理:Modal 彈窗
    然後又無意間刷到「Portal」，才知道Modal的實現還有如此妙的方式，順而想著乾脆把UI組件庫的實現原理看完。2.React的PortalReact Portal之所以叫Portal，因為做的就是和「傳送門」一樣的事情：render到一個組件裡面去，實際改變的是網頁上另一處的DOM結構。
  • 如何寫一個vue組件專題及常見問題 - CSDN
    $emit('change', val) } } }}複製代碼靈活的 prop我們常看到一些優秀的組件庫，傳入的值既可以是一個 String/Number，也可以是一個函數。比如ElementUI的Table組件，當你想要顯示樹形數據的時候，必須傳入row-key。
  • Riot 4.7.1 發布,簡單優雅的基於組件的 UI 庫
    const [key, value] = item if (value) return [...acc, key] return acc }, []).join(' ') } } </script></my-tag>詳情查看：Riot 是一個簡單而優雅的基於組件的
  • 網頁設計有難題?12款網頁設計模板給你靈感!
    作為網頁設計師，你的作品就是你專業水平的最好體現方式。所以，無論是參加面試還是個人作品展示，你的網頁模型是否能讓人眼前一亮，是否能在互動設計或視覺設計方面突出任何一點的優勢，是你取得面試機會和贏得客戶的關鍵。在網頁設計的初始階段，原型/線框/模型設計必然是一個關鍵步驟。如何通過網頁模型呈現設計思路，如何設計出優秀的網頁模型，如何取得設計靈感？
  • 《精通react/vue組件設計》之實現一個健壯的警告提示(Alert)組件
    本文轉載自【微信公眾號：趣談前端，ID:beautifulFront】經微信公眾號授權轉載，如需轉載與原文作者聯繫前言本文是筆者寫組件設計的第七篇文章, 今天帶大家實現一個自帶主題且可關閉的Alert組件, 該組件在諸如Antd或者elementUI等第三方組件庫中都會出現,主要用來提供系統的用戶反饋
  • 2019年七大優秀的網頁抓取工具
    2019年七大優秀的網頁抓取工具 網際網路不斷湧現出新的信息，新的設計模式和大量的數據。將這些數據組織到一個獨特的庫中並非易事。不過，有大量優秀的網頁抓取工具可供使用。
  • 9個高清無版權圖片素材庫,給你的創作增加閱讀量
    今天我給大家分享9個高清無版權圖片素材庫，讓你不再為圖片而發愁。話不多說，直接上內容。01、Pixabay網址：https://pixabay.com/中文圖片網站，可以檢索、查看分類的圖片，提供90W+免費的圖片。
  • 2018年你值得一看的網頁設計作品集賞析
    學習在線網頁設計作品集，激發靈感好的設計作品不僅能激發讀者的設計思路，也能讓你對設計者有所了解。以作品說話，也是一個不錯的宣傳自己的途徑。如果你正好也想學習如何設計個人作品網頁，這裡摹客君給大家精心整理了一些優秀設計師的在線網頁作品集案例，一定會對你有所幫助。8個優秀網頁設計作品集案例分享1.
  • 渲染百萬網頁,終於找到影響性能的原因了
    據我們所知，這可能是第一個將網頁性能、訪問錯誤和頁面腳本庫關聯在一起的數據集。我們將藉助這篇文章幫助大家了解如何構造高性能的網站。訪問了 100 萬個網頁，每個頁面 65 個指標、請求了 2100 多萬個 URL，記錄了 38 萬 3 千個錯誤，記錄了 8 千 8 百多萬個全局變量。
  • 讓所有程式設計師絕不能錯過的59個Python庫總結!
    Python有以下三個特點：易用性和靈活性全行業高接受度：Python無疑是業界最流行的數據科學語言用於數據科學的Python庫的豐富數量優勢本文介紹了python人最常用的59個python庫。一起來看看吧~用於數據收集的Python庫1.
  • 組件價格真的漲到離譜了嗎?漲價潮下 組件價格仍低於今年年初...
    【能源人都在看，點擊右上角加'關注'】北極星太陽能光伏網訊:各大央企的大宗組件集採已於八月下旬基本完成，但由於前期組件價格一漲再漲，與此前測算參考價格已不可同日而語，據消息人士透露，央企將在9月底進行集採項目的重新議價，涉及項目規模達到18GW