给 Web 开发人员推荐的通用独立 UI 组件(一)(按钮很不错)
现代 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 点此查看
给 Web 开发人员推荐的通用独立 UI 组件(一)(按钮很不错)的更多相关文章
- 给 Web 开发人员推荐的通用独立 UI 组件(二)
现代 Web 开发在将体验和功能做到极致的同时,对于美观的追求也越来越高.在推荐完图形库之后,再来推荐一些精品的独立 UI 组件.这些组件可组合在一起,形成美观而交互强大的 Web UI . 给 We ...
- Web 开发人员推荐的通用独立 UI 组件
现代 Web 开发在将体验和功能做到极致的同时,对于美观的追求也越来越高.在推荐完图形库之后,再来推荐一些精品的独立 UI 组件.这些组件可组合在一起,形成美观而交互强大的 Web UI . 给 We ...
- 向 Web 开发人员推荐35款 JavaScript 图形图表库
图表是数据图形化的表示,通过形象的图表来展示数据,比如条形图,折线图,饼图等等.可视化图表可以帮助开发者更容易理解复杂的数据,提高生产的效率和 Web 应用和项目的可靠性. 在这篇文章中,我们收集了3 ...
- 向Web开发人员推荐12款优秀的 Twitter Bootstrap 组件和工具
http://www.cnblogs.com/lhb25/archive/2012/09/11/resources-that-complement-twitter-bootstrap.html
- 给 Web 前端开发人员推荐20款 CSS 编辑器
CSS 和 HTML,JavaScript 是网页的基础,作为前端开发人员,对这三者都要很熟悉.特别是未来流行全栈开发的时代,每项技术都是你知识结构中必要的一个节点. 在开发中,选择好工具是非常重要的 ...
- 【特别推荐】Web 开发人员必备的经典 HTML5 教程
对于我来说,Web 前端开发是最酷的职业之一,因为你可以用新的技术发挥,创造出一些惊人的东西.唯一的问题是,你需要跟上这个领域的发展脚步,因此,你必须不断的学习,不断的前进.本文将分享能够帮助您快速掌 ...
- 【Tomcat】面向初级 Web 开发人员的 Tomcat
Apache Tomcat 应用服务器不再是高级 Web 系统开发人员的专用领域.在本教程中,Sing Li 将向初级 Web 开发人员展示如何利用他们当前的 Java™ 开发技能,使用 Tomcat ...
- 初级 Web 开发人员的 Tomcat
介绍使用 Tomcat 对 JavaServer Pages (JSP).servlet 和 Web 服务进行编程,Tomcat 是来自 Apache Foundation 的开源应用服务器.本教程引 ...
- 作为Web开发人员,我为什么喜欢Google Chrome浏览器
来源: http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.html 在Google Chrome浏览器出来之前,我一直使用FireF ...
随机推荐
- Android多线程研究(8)——Java中的原子性理解
一.什么是原子性 原子性是世界上最小单位,具有不可分割性.比如a=0;(a非long和double类型)这个操作是不可分割的,那么我们说这个操作是原子操作.再比如:a++;这个操作实际上是a=a+1; ...
- UTC、GTC时间和本地时间(Linux默认使用UTC时间,要修改一下)
1.问题 对于装有Windows和Linux系统的机器,进入Windows显示的时间和Linux不一致,Linux中的时间比Windows提前8个小时. 2.解决方法 修改/etc/default/r ...
- 【TP SRM 703 div2 500】 GCDGraph
Problem Statement You are given four ints: n, k, x, and y. The ints n and k describe a simple undire ...
- 正确理解Spring事务和数据库事务和锁
Lock wait timeout exceeded; try restarting transaction解决方案 参考文章 Spring中@Transactional事务回滚 http://www ...
- iOS开发webView的使用一
#import "ViewController.h" @interface ViewController () @property (weak, nonatomic) IBOutl ...
- CreateFeature与CreateFeatureBuffer区别
转自原文CreateFeature与CreateFeatureBuffer区别 CreateFeature主要用于插入一条数据,CreateFeatureBuffer住哟啊用于插入多条数据,详细说明见 ...
- 编辑器sublime、终端运行python
sublime编辑器 Sublime Text 是一个代码编辑器(Sublime Text 2是收费软件,但可以无限期试用) Sublime Text是由程序员Jon Skinner于2008年1月份 ...
- STL map 按key值和按value值排序
map是用来存放<key, value>键值对的数据结构,能够非常方便高速的依据key查到对应的value. 假如存储水果和其单位价格.我们用map来进行存储就是个不错的选择. 我们这样定 ...
- 自旋锁解决StackOverflowError案例
本节笔者分享一个在实际工作中遇到的栈内存溢出(StackOverflowError)问题,以及其解决方案. 问题介绍:笔者负责的一个Java Web项目在启动的时候,需要有一些初始化操作,而接下来的代 ...
- 使用Fernflower 比较准确的反编译整个java项目
以前一直使用jd-gui.exe ,都说是最好用的,但是编译总是有问题,还得修改,使用idea 后,感觉反编译的相当好,看注释是 Fernflower,然后参考 http://the.bytecod ...