文档章节

给 Web 开发人员推荐的通用独立 UI 组件(一)

编辑部的故事
 编辑部的故事
发布于 2017/08/03 17:56
字数 1103
阅读 6800
收藏 648

现代 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 点此查看

© 著作权归作者所有

共有 人打赏支持
编辑部的故事

编辑部的故事

粉丝 1176
博文 251
码字总数 440183
作品 0
深圳
运营/编辑
私信 提问
加载中

评论(11)

l
ldpeng
mark
月夜筱风
月夜筱风
mack
p
primates
mark 有用
产吅经理
产吅经理
这一个页面的东西拼起来,修改一下颜色就可以改名 xx-UI 了。
产吅经理
产吅经理
React-Grid-Layout 类似插件,非React版本的兄弟帮推荐。谢谢
Adam_OuYang
Adam_OuYang
6楼
Heanes
Heanes
mark 有用
chenwenli
chenwenli
如果上面项目 提到是依赖react的项目,那么一定能找到依赖vue的类似项目。比如最后一个的color项目,github上有个vue color,首页是差不多的
莫默磨墨先生
莫默磨墨先生
感谢分享,收藏:blush:
子木007
子木007
mark 有用
淘宝玉伯引发Web前后端研发模式讨论

淘宝玉伯是是前端基础类库 Arale 的创始人,Arale 基于 SeaJS 和 jQuery。不久前,淘宝玉伯在 Github 的 Arale 讨论页面上抛出了自己对于 Web 前后端研发模式的思考。 他首先指出了前端的产品...

bobo_lu
2012/12/06
0
1
颠覆式前端UI开发框架:React

基于HTML的前端界面开发正变得越来越复杂,其本质问题基本都可以归结于如何将来自于服务器端或者用户输入的动态数据高效的反映到复杂的用户界面上。而来自Facebook的React框架正是完全面向此...

雪舞__
2016/12/08
19
0
颠覆式前端UI开发框架:React

基于HTML的前端界面开发正变得越来越复杂,其本质问题基本都可以归结于如何将来自于服务器端或者用户输入的动态数据高效的反映到复杂的用户界面上。而来自Facebook的React框架正是完全面向此...

SomaLihq
06/27
0
0
Android 基于注解IOC组件化/模块化的架构实践

当前参与的项目历史也很久远,第一行代码据说是写于2014年的某一天,那时Android用的ide还是Eclipse、那时Android还没有很好的架构指导(mvp、mvvm)、那时Android最新的版本是5.0、那时And...

Tamic
05/13
0
0
六大最受欢迎的Bootstrap UI编辑器推荐

  【IT168 评论】现在有不少商业活动是基于网站导向的,因此,网站设计至关重要。除了网站的布局,对不同浏览器和设备的兼容性也很重要,如手机,平板电脑等,这也是网络和UI开发人员最大的...

it168网站
2016/12/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

聊聊storm的AggregateProcessor的execute及finishBatch方法

序 本文主要研究一下storm的AggregateProcessor的execute及finishBatch方法 实例 TridentTopology topology = new TridentTopology(); topology.newStream("spout1", spout......

go4it
40分钟前
1
0
大数据教程(7.5)hadoop中内置rpc框架的使用教程

博主上一篇博客分享了hadoop客户端java API的使用,本章节带领小伙伴们一起来体验下hadoop的内置rpc框架。首先,由于hadoop的内置rpc框架的设计目的是为了内部的组件提供rpc访问的功能,并不...

em_aaron
今天
1
0
CentOS7+git+github创建Python开发环境

1.准备CentOS7 (1)下载VMware Workstation https://pan.baidu.com/s/1miFU8mk (2)下载CentOS7镜像 https://mirrors.aliyun.com/centos/ (3)安装CentOS7系统 http://blog.51cto.com/fengyuns......

枫叶云
昨天
1
0
利用ibeetl 实现selectpicker 的三级联动

1. js 直接写在html页面上面,ibeetl 就可以动态地利用后台传上来的model List ,不需要每次点击都要ajax请求后台 2. 使用selectpicker 的时候,除了对selecct option的动态处理后,还需要 $("#...

donald121
昨天
1
0
Android SELinux avc dennied权限问题解决方法

1. 概述 SELinux是Google从android 5.0开始,强制引入的一套非常严格的权限管理机制,主要用于增强系统的安全性。 然而,在开发中,我们经常会遇到由于SELinux造成的各种权限不足,即使拥有“...

TreasureWe
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部