| { 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 >
### 紧跟潮流
大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。
这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分
**开源分享：https://docs.qq.com/doc/DSmRnRGxvUkxTREhO**
