WEB前端工具推荐丨分享6个热门颜色选择器组件
对于前端开发初学者而言,颜色选择器可能比较陌生,甚至在实际项目中都未曾使用过。但如果开发高端一点的网站的话,通常需要自定义主题功能,可以自定义导航栏、菜单栏的文本颜色、背景色之类的,此时就用到颜色选择器了。
今天为大家推荐几个 Github 上热门的颜色选择器组件。
一、Colorjoe
colorjoe 是一个具有触控和 AMD 支持的可扩展颜色选择器。可以通过 CSS 定义其实际尺寸和布局。通过这种方式,该组件非常适合响应式布局。
与那里的许多其他颜色选择器不同,colorjoe 是真正可扩展的。它基于 CSS,不依赖于外部图像。因此,您可以调整其大小以适应您的目的。还支持触控和 AMD 模块定义。
colorjoe 受到 ColorJack 和 RightJS Colorpicker 的启发。与那些不同的是,它实际上可以很好地扩展。从本质上讲,这意味着您将能够使用一些 CSS 定义其实际尺寸和布局。通过这种方式,小部件非常适合响应式布局。
此外,由于它提供的简单 API,实现缺失的功能(RGB 字段等)相对容易。
- 项目地址:
https://github.com/bebraw/colorjoe
安装
npm i colorjoe
如果您更喜欢独立的 dist,请将预打包的dist/colorjoe.js
和添加css/colorjoe.css
到您的页面或从 src/
使用 AMD 。
用法
const joe = colorjoe.rgb(element_id_or_dom_object, initial_color_value, extras);
或者
const joe = colorjoe.hsl(element_id_or_dom_object, initial_color_value, extras);
二、 Colorful
今天,每个依赖项都会拖累更多的依赖项,并且无法控制地增加项目的包大小。但是大小对于打算在浏览器中工作的所有内容都非常重要。React Colorful 是一个用于 React 和 Preact 应用程序的小型颜色选择器组件,使用 hooks 和函数组件构建。它使用严格的 TypeScript 编写,具有 100% 的测试覆盖率,界面简单易用,适用于大多数浏览器,支持移动设备和触摸屏遵循 WAI-ARIA 指南以支持辅助技术的用户,压缩后仅 2,8 KB(比 react-color 轻小13 倍)。react-colorful 是一个简单的颜色选择器,适合那些关心包大小和客户端性能的人。。
- 项目地址:
https://github.com/omgovich/react-colorful
安装
npm install react-colorful
import { HexColorPicker } from "react-colorful";const YourComponent = () => {const [color, setColor] = useState("#aabbcc");return <HexColorPicker color={color} onChange={setColor} />;
};
支持的颜色模型
我们为不同的颜色模型提供了 12 个额外的颜色选择器组件,除非您的应用程序需要 HEX 字符串作为输入/输出格式。
可用的选择器
Import | Value example |
---|---|
{ HexColorPicker }
|
"#ffffff"
|
{ RgbColorPicker }
|
{ r: 255, g: 255, b: 255 }
|
{ RgbaColorPicker }
|
{ r: 255, g: 255, b: 255, a: 1 }
|
{ RgbStringColorPicker }
|
"rgb(255, 255, 255)"
|
{ RgbaStringColorPicker }
|
"rgba(255, 255, 255, 1)"
|
{ HslColorPicker }
|
{ h: 0, s: 0, l: 100 }
|
{ HslaColorPicker }
|
{ h: 0, s: 0, l: 100, a: 1 }
|
{ HslStringColorPicker }
|
"hsl(0, 0%, 100%)"
|
{ HslaStringColorPicker }
|
"hsla(0, 0%, 100%, 1)"
|
{ HsvColorPicker }
|
{ h: 0, s: 0, v: 100 }
|
{ HsvaColorPicker }
|
{ h: 0, s: 0, v: 100, a: 1 }
|
{ HsvStringColorPicker }
|
"hsv(0, 0%, 100%)"
|
{ HsvaStringColorPicker }
|
"hsva(0, 0%, 100%, 1)"
|
代码示例
import { RgbColorPicker } from "react-colorful";const YourComponent = () => {const [color, setColor] = useState({ r: 50, g: 100, b: 150 });return <RgbColorPicker color={color} onChange={setColor} />;
};
三、Huebee
Huebee 是一个 JavaScript 库,用于创建以用户为中心的颜色选择器。Huebee 显示一组有限的颜色,因此用户可以一目了然地查看所有颜色,做出明确的决定,并通过单击选择一种颜色。
- 项目地址:
https://github.com/metafizzy/huebee
使用 npm 安装:npm install huebee
使用 Bower 安装:bower install huebee --save
在您的站点中包含 Huebee.css
和.js
文件。
<link rel="stylesheet" href="/path/to/huebee.css" media="screen">
<script src="/path/to/huebee.pkgd.min.js"></script>
Huebee 在锚元素上工作。
<!-- use inputs so users can set colors with text -->
<input class="color-input" value="#F80" /><!-- anchors can be buttons -->
<button class="color-button">Select color</button><!-- anchors can be any element -->
<span class="current-color">Current color</span>
四、React Color
React Color 提供了 13 种不同的颜色选择器,可以模拟流行网站和应用程序(如 GitHub、Photoshop、Chrome 和 Twitter)的 UI。不仅如此,还可以使用不同的组件来创建自定义颜色选择器。
- 项目地址:
https://github.com/casesandberg/react-color
安装和使用
npm install react-color --save
包含组件
import React from 'react'
import { SketchPicker } from 'react-color'class Component extends React.Component {render() {return <SketchPicker />}
}
可以分别导入:AlphaPicker
BlockPicker
ChromePicker
CirclePicker
CompactPicker
GithubPicker
HuePicker
MaterialPicker
PhotoshopPicker
SketchPicker
SliderPicker
SwatchesPicker
TwitterPicker
。
通过ReactCSS 实现100% 内联样式
五、Vue Color
Vue Color 是一个适用于 Sketch、Photoshop、Chrome 等的 Vue (Vue2.0)颜色选择器。
- 项目地址:
https://github.com/xiaokaike/vue-color
安装
NPM
$ npm install vue-color
CommonJS
var Photoshop = require('vue-color/src/Photoshop.vue');new Vue({components: {'Photoshop': Photoshop}
})
ES6
import { Photoshop } from 'vue-color'new Vue({components: {'photoshop-picker': Photoshop}
})
浏览器全局变量
该dist
文件夹包含对象vue-color.js
中vue-color.min.js
导出的所有组件。window.VueColor
这些包也可用于 NPM 包。
<script src="path/to/vue.js"></script>
<script src="path/to/vue-color.min.js"></script>
<script>var Photoshop = VueColor.Photoshop
</script>
本地设置
npm install
npm run dev
六、iro.js
iro.js 是一个用于 JavaScript 的模块化、注重设计的颜色颜色选择器组件 - 支持多种颜色格式。所有 iro.js 都可以从单个脚本运行 - 不需要额外的 CSS、图像或第三方库!
- 项目地址:
https://github.com/jaames/iro.js
安装
使用 NPM 安装
npm install @jaames/iro --save
如果您使用的是 Webpack 或 Rollup 之类的模块打包器,请将 iro.js 导入您的项目:
// Using ES6 module syntax
import iro from '@jaames/iro';// Using CommonJS modules
const iro = require('@jaames/iro');
使用 jsDelivr CDN
<script src="https://cdn.jsdelivr.net/npm/@jaames/iro@5"></script>
当您像这样手动包含库时,iro.js 将在 window.iro
上全局可用。
下载并托管自己
< html > < head > <!-- ... --> < script src =" ./path/to/ iro.min.js " > </ script > </ head > <!-- ... - ->
</ html >
WEB前端工具推荐丨分享6个热门颜色选择器组件相关推荐
- 100本最棒的web前端图书推荐
100本最棒的web前端图书推荐 01.<JavaScript DOM编程艺术第二版(中文)> 语言:中文 类型:pdf 简介:这本书作为被大家推荐的最多的前端入门书籍是有道理的. 他能真 ...
- 100本最棒的web前端图书推荐(五)
写在前面 <100本最棒的web前端图书推荐>系列图书资料分享,已经在前面分享过两期,分别是<100本最棒的web前端图书推荐(一)>,<100本最棒的web前端图书推荐 ...
- Web前端开发推荐阅读书籍-精华
学校里没有前端的课程,那如何学习JavaScript,又如何使自己成为一个合格的前端工程师呢? 读书吧~相对于在网上学习,在项目中学习和跟着有经验的同事学习,书中有着相对完整的知识体系,每读一本好书都 ...
- Web前端开发入门学习分享
Web前端开发入门学习分享 1:如何开始学习Web前端 首先你需要学习html的各个标签,掌握其用法和规范,明白其作用. 开始学习css的使用,你先学习在html页面中为标签增加css样式,其次是将c ...
- 高性能WEB开发(6) - web性能测试工具推荐
Posted on 2010-04-28 12:57 BearRui(AK-47) 阅读(9341) 评论(14) 编辑 收藏 所属分类: 高性能WEB开发 本来这篇文章应该在写在前面的,因本人写 ...
- Web前端开发学习资料分享
2019独角兽企业重金招聘Python工程师标准>>> Web前端开发教程: (1)Web开发必备手册大集合 (2)Web前端开发人员和设计师必读文章推荐(系列一~系列八) (3)[ ...
- Web前端剪切板文本分享到文件发送
注意:本文Demo请点击文末"阅读原文"方便查看. 前言 现在前端富交互能力越来越强,也有很多产品基于前端技术进行离线应用开发或在线应用体验增强:这其中剪切板操作也是一个经常会亮相 ...
- web前端开发推荐阅读书籍
前言 学校里没有前端的课程,那如何学习JavaScript,又如何使自己成为一个合格的前端工程师呢? 读书吧~相对于在网上学习,在项目中学习和跟着有经验的同事学习,书中有着相对完整的知识体系,每读一本 ...
- [Web前端工具篇]Sublime 3安装Markdown插件
1.简介 今天这边文章主要还是写如何离线安装Markdown插件 2.安装流程 2.1 下载官方软件 Sublime Text 3 官网 2.2 PackageControl 插件的安装 Packag ...
- Web性能测试工具推荐
http://www.2cto.com/os/201403/283339.html WEB性能测试工具主要分为三种: 一种是测试页面资源加载速度的: 一种是测试页面加载完毕后页面呈现.JS操作速度的: ...
最新文章
- p8大佬告诉你JSR - 133 都解决了哪些问题?
- 数据结构实验之图论二:图的深度遍历(DFS)
- Windows环境 和 Linux环境下搭建Qt开发环境
- 项目部署到tomcat6.0启动成功后访问页面报500_.net core IIS部署教程
- java基础总结06-常用api类-Object和Objects
- spring框架类加载顺顺序 并 在spring启动后查询数据库加载到容器内
- JSON格式化软件 - 开源工具 JSON Viewer
- Javascript格式化工具
- 第1142期AI100_机器学习日报(2017-11-03)
- html中点击按钮闪现,vue使用v-if v-show页面闪烁,div闪现的解决方法
- 解决VMware装上Mac后icloud无法激活 【安装QQ发现不能注册Apple ID】
- Jmeter应用-接口测试
- 快速分析京东物流详情,并导出EXCEL表格
- 产品经理常用的几种原型软件
- office2010安装包下载,专业版完整版官方原版
- 无线网络安全————2、无线路由器配置和选择测试环境
- word怎么删除空白页,Word Mac删除空白页面的图文方法
- 攻防世界-PWN-new_easypwn
- python连接打印机打印文档、图片、pdf文件等
- 窗口置顶工具v1.1.0
热门文章
- 古剑奇谭ol服务器位置,古剑奇谭ol新手大型入门图文攻略
- 【2020.11.16】堆栈传参、堆栈平衡
- Ubuntu 10.04 使用libfetion
- 古建筑数字化影像采集技术分析
- 如何完成一款游戏? | 独立游戏制作
- 计算机专业应届毕业生如何找工作(偏软件方向)
- unity c# 触摸屏物体识别桌算法
- 游戏网页制作 仿英雄联盟网页设计作业 HTML CSS游戏官网网页模板 大学生游戏介绍网站毕业设计 DW游戏主题网页模板下载 游戏娱乐网页成品代码 英雄联盟网页作品下载
- spotify注册服务器,【评测】Cocktail Audio N25:集USB解码、TIDAL、Spotify、NAS 串流、音乐服务器于......
- 旧手机上的微信数据丢失怎么才能恢复回来