Web 開發人員推薦的通用獨立 UI 組件

現代 Web 開發在將體驗和功能作到極致的同時，對於美觀的追求也愈來愈高。在推薦完圖形庫以後，再來推薦一些精品的獨立 UI 組件。這些組件可組合在一塊兒，造成美觀而交互強大的 Web UI 。

• 給 Web 開發人員推薦的開源圖形庫 —— 2D/3D

• 給 Web 開發人員推薦的開源圖形庫 —— 動畫

• 給 Web 開發人員推薦的開源圖形庫 —— 數據可視化

下面將針對佈局（Layout）、Icon（圖標）、Progress（進度）、Button（按鈕）、Picker（選擇器）、Accordion（摺疊）、Input（輸入）、Overlay（重疊）、Content（內容/目錄）、Editor（編輯）、Widget（掛件）等分別作一些推薦整理。因爲篇幅有限，將分兩期發佈，歡迎保持關注。

 

1、佈局

 

 

Split.js

https://www.oschina.net/p/split-js

一個輕量級的 JavaScript 工具，用於建立可調整的分割視圖或者窗格，gzip 大小僅 2 KB。視圖能夠水平或者垂直分割，沒有附加的開銷和窗口，使用純 CSS 進行調整。同時，還保證了與 IE9 和 IE8 ，以及 Firefox / Chrome / Safari / Opera 等主流瀏覽器的兼容性。

Demo：http://nathancahill.github.io/Split.js/

 

 

Bricks.js

https://www.oschina.net/p/bricksjs

一個快速的佈局堆砌器，不須要 HTML 標記或 CSS 樣式表便可完成佈局。功能強大，配置文件可讀。

Demo：http://callmecavs.com/bricks.js/

 

 

masonry

https://www.oschina.net/p/masonry

一個老牌佈局框架，已開發和維護 8 年，擁有本身的描述語法，採用優雅的鏈式語法封裝自動佈局。它能夠根據可用的垂直空間將元素放置在最佳位置，相似於在牆壁上砌磚的經驗豐富的泥水匠。

Demo：https://masonry.desandro.com/

 

 

React-Grid-Layout

https://github.com/STRML/react-grid-layout

不一樣於前面，這是一個 React Grid 佈局系統，不須要 jQuery。它是響應式的，而且支持斷點（breakpoints）。斷點佈局可由用戶提供或自動生成，可隨意拖動和調整大小。

Demo：https://strml.github.io/react-grid-layout/examples/0-showcase.html

 

2、圖標

 

 

Feather

https://www.oschina.net/p/feather-icons

一款簡單漂亮的開源圖標集，強調功能、一致性和簡單性。主要設計的使用範疇爲應用系統、媒體控制、位置、天氣、箭頭、徽標等，均爲以線條爲主的極簡化設計。圖標遵循 24x24 Grid 設計。

Demo ：http://feathericons.com/

 

 

Material Icons Guide

http://google.github.io/material-design-icons/

Google 開源的 Material Design 圖標集，在 Web 應用，安卓和 iOS 設計中均適用。包含用於媒體播放、通信、內容編輯、鏈接等等經常使用的圖標，目前數量已超過 900 個。

Demo：http://material.io/icons/

 

 

Bytesize Icons

http://danklammer.com/bytesize-icons/

一個輕量級 style-controlled SVG 圖標集，每一個圖標都是遵循 32x32 Grid 進行手工編碼，並使用 SVG 筆畫，以實現最大靈活性。這意味着你能夠調整顏色、尺寸、量級，以及是否但願邊緣爲圓形或正方形。

Demo 演示：http://danklammer.com/articles/svg-stroke-ftw/#give-it-a-spin

 

 

3、進度

 

 

NProgress

https://www.oschina.net/p/nprogress

應用於複雜網頁的細長進度條，很是輕巧，使用便捷，靈感來源於 Google、YouTube 和 Medium 。它也是極細的納米級進度條，用逼真的細線條動畫讓用戶看到網頁正在發生的事情。

Demo ：http://ricostacruz.com/nprogress/

 

 

nanobar

https://www.oschina.net/p/nanobar-js

很是輕量級的進度條，gziped 大小僅約 699 字節。就是很直接的提供一些方法來控制進度條的當前進度。

Demo：http://nanobar.jacoborus.codes/

 

 

4、按鈕

 

 

Ladda

https://www.oschina.net/p/ladda

一款把加載提示效果集成到按鈕中，以彌合行動和反饋之間的時間間隔，提供更好的功能使用體驗的庫。主要用於在用戶點擊提交以後，即時提供反饋，讓他們知道瀏覽器正在處理用戶提交的任務。

Demo：http://lab.hakim.se/ladda/

 

 

Buttons

https://www.oschina.net/p/buttons

一個高度可定製、開箱即用的移動 web 和桌面 css 按鈕庫，基於 Sass 和 Compass 框架構建，包含各類形狀、顏色、邊框、2D/3D 、陰影、發光、下拉、分組、堆疊等不一樣類型的按鈕。

Demo：http://unicorn-ui.com/buttons/

 

 

5、選擇器

 

 

Pikaday

https://www.oschina.net/p/pikaday

一個清爽簡潔的 JavaScript 日期選擇器，輕量、無依賴，CSS 模塊化。

Demo：https://dbushell.com/Pikaday/

 

 

React Color

http://casesandberg.github.io/react-color/

Sketch、Photoshop、Chrome、Github、Twitter、Material Design 等多種顏色選擇器合集，包含 13 種不一樣的選擇器，也可使用提供的標準組件來建立本身的組件。

Demo：https://casesandberg.github.io/react-color/

 

更多幹貨請前往公衆號菜單欄「讀我」->「乾貨分享」查看。