現代 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/

2、Bricks.js：https://www.oschina.net/p/bricksjs

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

Demo 點此查看：http://callmecavs.com/bricks.js/

3、masonry：https://www.oschina.net/p/masonry

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

Demo 點此查看：https://masonry.desandro.com/

4、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

二、圖標

1、Feather：https://www.oschina.net/p/feather-icons

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

Demo 點此查看：http://feathericons.com/

2、Material Icons Guide：http://google.github.io/material-design-icons/

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

Demo 點此查看：http://material.io/icons/

3、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

三、進度

1、NProgress：https://www.oschina.net/p/nprogress

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

Demo 點此查看：http://ricostacruz.com/nprogress/

2、nanobar：https://www.oschina.net/p/nanobar-js

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

Demo 點此查看：http://nanobar.jacoborus.codes/

四、按鈕

1、Ladda：https://www.oschina.net/p/ladda

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

Demo 點此查看：http://lab.hakim.se/ladda/

2、Buttons：https://www.oschina.net/p/buttons

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

Demo 點此查看：http://unicorn-ui.com/buttons/

五、選擇器

1、Pikaday：https://www.oschina.net/p/pikaday

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

Demo 點此查看：https://dbushell.com/Pikaday/

2、React Color：http://casesandberg.github.io/react-color/

Sketch、Photoshop、Chrome、Github、Twitter、Material Design 等多種顏色選擇器合集，包含 13 種不同的選擇器，也可以使用提供的標準組件來創建自己的組件。

Demo 點此查看：https://casesandberg.github.io/react-color/

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！