颜色选择器组件提供一个简洁美观的面板,很方便的选择常用的颜色,具有推荐颜色、最近使用颜色、拾色器、自定义颜色等功能。
一、介绍
- 推荐颜色:默认为红橙黄绿青蓝紫的不同深浅色,支持自定义
- 最近使用:使用
localstorage
记录最近使用过的颜色 - 拾色器:颜色吸管工具可吸取网页上其他元素的颜色值
- 更多颜色:可以编辑器颜色的透明度,色盘选择颜色、输入颜色值等(使用react-color实现)
图例
- 颜色选择器主面板
- 拾色器(颜色吸管工具)
二、使用
安装
npm install -s color-picker-react-component
复制代码
使用
import React, { useState } from 'react';
import ColorPicker from 'color-picker-react-component';
export default () => {
const [color, setColor] = useState('#fff');
const [visible, setVisible] = useState(false);
return (
<>
<div
color={color}
style={{
width: 20,
height: 20,
border: '1px solid #ccc',
backgroundColor: color,
}}
/>
<ColorPicker
color={color}
visible={visible}
onChange={(color: string) => setColor(color)}
onVisibleChange={(v: boolean) => setVisible(v)}
/>
</>
);
};
复制代码
三、参数说明
参数名 | 含义 | 默认值 | 备注 |
---|---|---|---|
color | 颜色值 | '#000' | - |
visible | 是否可见 | true | - |
recommendedColors | 自定义推荐颜色 | - | - |
localStorageKey | 自定义key | 'color_picker_recent_color' | 最近颜色使用的localStorage唯一键值 |
showPipetteColor | 是否显示拾色器 | true | - |
showMoreColor | 是否显示更多颜色 | true | - |
className | 类名 | '' | - |
style | 样式对象 | {} | - |
onChange | 监听颜色变化 | - | ({ color: string; }) => void |
onVisibleChange | 监听显示变化 | - | (visible: boolean) => void |
更多
npm包
目前已经发布1.0版本到npm,欢迎大家使用