文档章节

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

编辑部的故事
 编辑部的故事
发布于 2017/08/10 16:34
字数 1103
阅读 5642
收藏 497
点赞 12
评论 8

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

上期已针对布局(Layout)、Icon(图标)、Progress(进度)、Button(按钮)、Picker(选择器)进行推荐,这期将针对 Overlay(弹出层/弹窗)、Input(输入)、Content(内容/目录)、Editor(编辑器)、Widget(组件/挂件)等继续做一些推荐整理。

一、弹出层/弹窗

1、vex

一个现代化的对话库,高度可配置,可随意定制。vex 很小(压缩后仅 5.6kb ),有一个清晰和简单的 API ,无外部依赖,完全平面风格,提供多种样式。支持同时打开多个对话框,可选单独或全部关闭它们。更适用于移动端。

Demo

2、Notie

一个简单干净的 javascript 通知、输入和选择套件,无外部依赖。 能轻松定制,可更改颜色以符合你的风格和品牌,字体大小会根据屏幕尺寸自动调整。

Demo

3、SweetAlert2

一个漂亮、响应式、可定制、易用的 JavaScript 弹窗(弹出框),无任何依赖。

Demo

二、输入

1、Cleave.js

一款很简单的输入插件,会自动格式化输入框的文本内容。使用它,你不需要编写任何正则表达式来控制输入文本的格式。支持信用卡号码、电话号码格式(各个国家)、日期格式、数字格式、自定义分隔符,前缀和块模式等,提供 CommonJS/AMD 模式以及 ReactJS 组件端口。

Demo

2、React Tags Input

用于输入标签的 React 组件,高度可定制。

Demo

三、内容/目录

1、React Data Grid

React 构建的类 Excel 网格组件,具有完整的键盘导航、单元格复制和粘贴、单元格拖放、冻结列、列调整大小、排序、过滤等功能。支持使用各种格式化程序和编辑器查看和编辑单元格,可快速配置和自定义功能,并快速渲染。

Demo

2、Slick

强大的响应式轮播组件,支持移动设备滑动,支持桌面浏览器鼠标拖动,支持循环。此外,还支持左右控制、动态添加&删除&过滤、自动播放、圆点、箭头、回调等。react-slick 是它的 react 版。

Demo

3、React Paginate

一个 ReactJS 分页组件,安装这个组件后只需写一点点 CSS ,就能实现下面的分页效果。

四、编辑器

1、Draft.js

一个富文本编辑框架,提供一致的模型以及跨浏览器差异化的抽象,可以简化富文本编辑的要求。它可扩展并可定制,可轻松构建任何类型的富文本输入,可无缝适用于 React 应用。

Demo

2、Quill

一款现代化富文本编辑器,基于可扩展的架构设计,提供丰富的 API 进行定制。快速且轻量级,语意标签,标准化 HTML。同时还保证兼容性,支持 Chrome、Firefox、Safari、Edge、IE 9+ 等主流浏览器。

Demo

五、组件/挂件

音乐 —— React Music

顾名思义,就是个 React 音乐挂件,支持使用低频振荡器来修改和定义播放音乐的效果属性。

Demo

日期 —— React Big Calendar

React 的事件日历组件,可用于现代浏览器。

Demo

地图 —— React Google Maps

React 的 Google Maps 集成组件。

Demo

视频 —— ReactPlayer

一个可播放各种 URL 的组件,包括文件路径、YouTube、Facebook、SoundCloud、Streamable、Vidme、Vimeo、Wistia 和 DailyMotion 。它会解析 URL 并加载相应的标记和外部 SDK 以播放各种来源的视频。

Demo

搜索 —— Searchkit

一套由 React 构建的 UI 组件,旨在快速创建好看的搜索应用程序,可按需进行自定义。

Demo

验证 —— Redux Auth

react + redux 构建的 token 认证系统,支持 isomorphic rendering (同构渲染)。包含 OAuth2 认证组件、邮件认证组件,集成 devise token auth ,支持更换主题。

Demo

© 著作权归作者所有

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

编辑部的故事

粉丝 1083
博文 231
码字总数 392922
作品 0
深圳
运营/编辑
加载中

评论(8)

首席的哥队长
首席的哥队长
Notie不错,正好需要,其它的貌似react占了大部分
曾建凯
曾建凯
React Data Grid当列多的时候,会很卡,很多个版本如此。
许雷神
许雷神
SweetAlert2不如layer!!之前用的时候,觉得有点卡卡卡
王练
王练

引用来自“千秋水”的评论

给 Web 开发人员推荐的通用独立 UI 组件(一) 的链接不是文章,直接是博客主页了......
已更正
chenwenli
chenwenli
很多react。。
竹隐江南
竹隐江南
一大波 React ,O hahahahh
宇润
宇润
弹出层不用layer。。。???
千秋水
给 Web 开发人员推荐的通用独立 UI 组件(一) 的链接不是文章,直接是博客主页了......
淘宝玉伯引发Web前后端研发模式讨论

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

bobo_lu ⋅ 2012/12/06 ⋅ 1

Tiny快速入门之Web界面快速开发实践

前面讲了基于Tiny做服务,这篇来讲讲用Tiny怎么做界面。f 下面是一些常用的链接,供大家使用: GIT地址(必须是OSC家的):https://git.oschina.net/tinyframework/tiny 问题报告:https://git...

悠悠然然 ⋅ 2014/11/25 ⋅ 43

前端优化之拆分CSS】前端三剑客的分分合合

几年前,我们这样写前端代码: 测试 慢慢的,我们发现这样做的很多弊端,单就样式一块,改一个样式会涉及到多处调整,所以慢慢的dom标签中的css全部去了一个独立的css文件 再后来,交互变得异...

范大脚脚 ⋅ 2017/11/17 ⋅ 0

【前端优化之拆分CSS】前端三剑客的分分合合

几年前,我们这样写前端代码: 测试 慢慢的,我们发现这样做的很多弊端,单就样式一块,改一个样式会涉及到多处调整,所以慢慢的dom标签中的css全部去了一个独立的css文件 再后来,交互变得异...

范大脚脚 ⋅ 2017/11/10 ⋅ 0

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

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

Tamic ⋅ 05/13 ⋅ 0

HTML5来了,7个混合式移动开发框架

在这个时间开始学习移动开发真是最好不过了,每个人应该都有一些移动应用的创意,而且你并不需要任何的原生应用编程经验,你只需要一些HTML的相关知识,懂一些CSS和JavaScript就够了。如果你...

数通畅联 ⋅ 2015/01/04 ⋅ 0

2017八大热门JavaScript开发框架

  【IT168 评论】应用程序赋予了移动设备极大的易用性,只需动动手指,就可以支付账单,购物,在线订票等。但智能手机革命给开发人员带来了许多挑战,因为开发领域正在发生巨大的变化。面对...

it168网站 ⋅ 2017/02/21 ⋅ 0

颠覆式前端UI开发框架:React

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

雪舞__ ⋅ 2016/12/08 ⋅ 0

颠覆式前端UI开发框架:React

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

SomaLihq ⋅ 2017/01/12 ⋅ 0

[转]Web App 框架选择之百度&腾讯

百度的GMU GMU(Global Mobile UI)是百度前端通用组开发的移动端组件库,GMU是基于zepto的mobile UI组件库,提供webapp、pad端简单易用的UI组件。具有代码体积小、简单、易用等特点,组件内...

冰点沐雪 ⋅ 2014/12/16 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

火狐浏览器各版本下载及插件httprequest

各版本下载地址:http://ftp.mozilla.org/pub/mozilla.org//firefox/releases/ httprequest插件截至57版本可用

xiaoge2016 ⋅ 29分钟前 ⋅ 0

Java学习路径及练手项目合集

Java学习路径及练手项目合集

颖伙虫 ⋅ 45分钟前 ⋅ 0

Docker系列教程28-实战:使用Docker Compose运行ELK

原文:http://www.itmuch.com/docker/28-docker-compose-in-action-elk/,转载请说明出处。 ElasticSearch【存储】 Logtash【日志聚合器】 Kibana【界面】 答案: version: '2'services: ...

周立_ITMuch ⋅ 今天 ⋅ 0

使用快嘉sdkg极速搭建接口模拟系统

在具体项目研发过程中,一旦前后端双方约定好接口,前端和app同事就会希望后台同事可以尽快提供可供对接的接口方便调试,而对后台同事来说定好接口还仅是个开始、设计流程,实现业务逻辑,编...

fastjrun ⋅ 今天 ⋅ 0

PXE/KickStart 无人值守安装

导言 作为中小公司的运维,经常会遇到一些机械式的重复工作,例如:有时公司同时上线几十甚至上百台服务器,而且需要我们在短时间内完成系统安装。 常规的办法有什么? 光盘安装系统 ===> 一...

kangvcar ⋅ 昨天 ⋅ 0

使用Puppeteer撸一个爬虫

Puppeteer是什么 puppeteer是谷歌chrome团队官方开发的一个无界面(Headless)chrome工具。Chrome Headless将成为web应用自动化测试的行业标杆。所以我们很有必要来了解一下它。所谓的无头浏...

小草先森 ⋅ 昨天 ⋅ 0

Java Done Right

* 表示难度较大或理论性较强。 ** 表示难度更大或理论性更强。 【Java语言本身】 基础语法,面向对象,顺序编程,并发编程,网络编程,泛型,注解,lambda(Java8),module(Java9),var(...

风华神使 ⋅ 昨天 ⋅ 0

Linux系统日志

linux 系统日志 /var/log/messages /etc/logrotate.conf 日志切割配置文件 https://my.oschina.net/u/2000675/blog/908189 logrotate 使用详解 dmesg 命令 /var/log/dmesg 日志 last命令,调......

Linux学习笔记 ⋅ 昨天 ⋅ 0

MVC——统一报文格式的异常处理响应

在我们写controller层的时候,常常会有这样的困惑,如果需要返回一个数据是,可能为了统一回去构造一个类似下列的数据格式: { status:true, msg:"保存成功!", data:[]} 而且在写...

alexzhu592 ⋅ 昨天 ⋅ 0

android -------- 打开本地浏览器或指定浏览器加载,打电话,打开第三方app

开发中常常有打开本地浏览器加载url或者指定浏览器加载, 还有打开第三方app, 如 打开高德地图 百度地图等 在Android程序中我们可以通过发送隐式Intent来启动系统默认的浏览器。 如果手机本身...

切切歆语 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部