给 Web 开发人员推荐的通用独立 UI 组件(一)
给 Web 开发人员推荐的通用独立 UI 组件(一)
编辑部的故事 发表于4个月前
给 Web 开发人员推荐的通用独立 UI 组件(一)
  • 发表于 4个月前
  • 阅读 6533
  • 收藏 649
  • 点赞 26
  • 评论 11

腾讯云 技术升级10大核心产品年终让利>>>   

现代 Web 开发在将体验和功能做到极致的同时,对于美观的追求也越来越高。在推荐完图形库之后,再来推荐一些精品的独立 UI 组件。这些组件可组合在一起,形成美观而交互强大的 Web UI 。

下面将针对 Layout(布局)、Icon(图标)、Progress(进度)、Button(按钮)、Picker(选择器)、Accordion(手风琴、抽屉)、Input(输入)、Overlay(弹出层)、Content(内容/目录)、Editor(编辑)、Widget(挂件)等分别做一些推荐整理。由于篇幅有限,将分两期发布,欢迎保持关注。

一、布局

1、Split.js

一个轻量级的 JavaScript 工具,用于创建可调整的分割视图或者窗格,gzip 大小仅 2 KB。视图可以水平或者垂直分割,没有附加的开销和窗口,使用纯 CSS 进行调整。同时,还保证了与 IE9 和 IE8 ,以及 Firefox / Chrome / Safari / Opera 等主流浏览器的兼容性。

Demo 点此查看

2、Bricks.js

一个快速的布局堆砌器,不需要 HTML 标记或 CSS 样式表即可完成布局。功能强大,配置文件可读。

Demo 点此查看

3、masonry

一个老牌布局框架,已开发和维护 8 年,拥有自己的描述语法,采用优雅的链式语法封装自动布局。它可以根据可用的垂直空间将元素放置在最佳位置,类似于在墙壁上砌砖的经验丰富的泥水匠。

Demo 点此查看

4、React-Grid-Layout

不同于前面,这是一个 React Grid 布局系统,不需要 jQuery。它是响应式的,并且支持断点(breakpoints)。断点布局可由用户提供或自动生成,可随意拖动和调整大小。

Demo 点此查看

二、图标

1、Feather

一款简单漂亮的开源图标集,强调功能、一致性和简单性。主要设计的使用范畴为应用系统、媒体控制、位置、天气、箭头、徽标等,均为以线条为主的极简化设计。图标遵循 24x24 Grid 设计。

Demo 点此查看

2、Material Icons Guide

Google 开源的 Material Design 图标集,在 Web 应用,安卓和 iOS 设计中均适用。包含用于媒体播放、通讯、内容编辑、连接等等常用的图标,目前数量已超过 900 个。

Demo 点此查看

3、Bytesize Icons

一个轻量级 style-controlled SVG 图标集,每个图标都是遵循 32x32 Grid 进行手工编码,并使用 SVG 笔画,以实现最大灵活性。这意味着你可以调整颜色、尺寸、量级,以及是否希望边缘为圆形或正方形。

Demo 演示:点此查看

三、进度

1、NProgress

应用于复杂网页的细长进度条,非常轻巧,使用便捷,灵感来源于 Google、YouTube 和 Medium 。它也是极细的纳米级进度条,用逼真的细线条动画让用户看到网页正在发生的事情。

Demo 点此查看

2、nanobar

非常轻量级的进度条,gziped 大小仅约 699 字节。就是很直接的提供一些方法来控制进度条的当前进度。

Demo 点此查看

四、按钮

1、Ladda

一款把加载提示效果集成到按钮中,以弥合行动和反馈之间的时间间隔,提供更好的功能使用体验的库。主要用于在用户点击提交之后,即时提供反馈,让他们知道浏览器正在处理用户提交的任务。

Demo 点此查看

2、Buttons

一个高度可定制、开箱即用的移动 web 和桌面 css 按钮库,基于 Sass 和 Compass 框架构建,包含各种形状、颜色、边框、2D/3D 、阴影、发光、下拉、分组、堆叠等不同类型的按钮。

Demo 点此查看

五、选择器

1、Pikaday

一个清爽简洁的 JavaScript 日期选择器,轻量、无依赖,CSS 模块化。

Demo 点此查看

2、React Color

Sketch、Photoshop、Chrome、Github、Twitter、Material Design 等多种颜色选择器合集,包含 13 种不同的选择器,也可以使用提供的标准组件来创建自己的组件。

Demo 点此查看

共有 人打赏支持
编辑部的故事
粉丝 968
博文 208
码字总数 346931
评论 (11)
TerryZ
不错,star了一个进度条的插件!
子木007
mark 有用
莫默磨墨先生
感谢分享,收藏:blush:
chenwenli
如果上面项目 提到是依赖react的项目,那么一定能找到依赖vue的类似项目。比如最后一个的color项目,github上有个vue color,首页是差不多的
Heanes
mark 有用
Adam_OuYang
6楼
Contac
React-Grid-Layout 类似插件,非React版本的兄弟帮推荐。谢谢
Contac
这一个页面的东西拼起来,修改一下颜色就可以改名 xx-UI 了。
primates
mark 有用
月夜筱风
mack
ldpeng
mark
×
编辑部的故事
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: