demo链接:github demo

安装: npm install react-color --save

有一下几种类型组件

<AlphaPicker /> <BlockPicker /> <ChromePicker/> <CirclePicker /> <CompactPicker /> <GithubPicker /> <HuePicker/> <MaterialPicker /><PhotoshopPicker /> <SketchPicker/> <SliderPicker/> <SwatchesPicker/>  <TwitterPicker/>

公有的组件API:

color 控制颜色选择器上的当前选中颜色,用来进行初始化颜色,或者用来保持父子组件颜色一致

onChange 修改颜色时触发。每次修改颜色都会传递一个函数来调用。他将被频繁调用。如果你只是想获得最后的选中颜色,使用 onChangeComplete 即可

onChangeComplete 颜色更改完成后触发,这时就可以保持父子组件颜色同步

私有的组件API:(某些特定组件才有的API)

colors 组件的默认颜色数组。通过他可以在多选的颜色组件中进行默认配置

根据项目中的使用情况,后面会继续记录

react-color 颜色选择器组件的更多相关文章

  1. React Color使用

    需求 - 要在react项目中实现颜色获取器功能 解决方案 - 使用react-color 依赖 - git地址:https://github.com/casesandberg/react-color ...

  2. HTML5的input color系统颜色选择器

    前两天,我写了一篇<推荐两款jQuery色盘选择器>介绍,那是使用JavaScript实现的色盘,今天我给大家介绍HTML5的色盘选择器.HTML5有一个input类型为color,即颜色 ...

  3. 基于vue的颜色选择器color-picker

    项目中有用到颜色选择器的童鞋们可以看过来了 关于color-picker的jquery的插件是有蛮多,不过vue组件没有吧,反正我没有找到, 虽然element-ui里面有这个,但是你愿意为了一个小功 ...

  4. 10个精选的颜色选择器Javascript脚本及其jQuery插件

     Color picker即颜色选择器使我们在web开发中可能经常用到的组件,今天我们特意精选了10个超酷的颜色选择器实现,其中包括了javascript脚本 实现及其传说中的jQuery插件实现 ...

  5. 基于vue的颜色选择器vue-color-picker

    项目中有用到颜色选择器的童鞋们可以看过来了 关于color-picker的jquery的插件是有蛮多,不过vue组件没有吧,反正我没有找到, 虽然element-ui里面有这个,但是你愿意为了一个小功 ...

  6. 【canvas系列】用canvas实现一个colorpicker(类似PS的颜色选择器)

    每个浏览器都有自己的特点,比如今天要做的colorpicker就是,一千个浏览器,一千个哈姆雷特,一千个colorpicker.今天canvas系列就用canvas做一个colorpicker. ** ...

  7. 11个JavaScript颜色选择器插件

    几年前,很难找到一个合适的颜色选择器.正好看到很多不错的JavaScript颜色选择器插件,故而把这些编译汇总.在本文,Web设计师和开发人员 Kevin Liew 选取了11个相应插件,有些会比较复 ...

  8. UWP 颜色选择器(ColorPicker) 和 自定义的Flyout(AdvancedFlyout)

    ColorPicker 故事背景 项目里面需要一个像Winfrom里面那样的颜色选择器,如下图所示: 在网上看了一下.没有现成的东东可以拿来使用.大概查看了一下关于颜色的一些知识,想着没人种树,那就由 ...

  9. 改造过的JS颜色选择器

    项目中用到颜色选择功能,在网上找了个颜色选择器,自己改了改代码.做成了一个可动态加载的颜色选择器. 把代码贴上,当是记录. /*Copyright(c)2009,www.supersite.me*/ ...

随机推荐

  1. Ubuntu下systemd服务的配置

    1. 在/lib/systemd/system目录下创建服务启动脚本testservice.service 2. 文件内容如下: [Unit] Description=TestService [Ser ...

  2. Tomcat的配置方法(解压版)

    Tomcat解压版虽然不用安装,但是死难配!!之前刚学的时候很是郁闷了一阵,Jsp倒还好,但是Servlet死活跑不起来.今天就把你给记下来!! 解压到C:/Tomcat 然后再配置环境变量: 添加三 ...

  3. 06网络通信udp-tcp、正则

    一. udp网络程序 1.    udp网络程序-发送数据 1)创建客户端套接字 2)发送/接收数据 3)关闭套接字 from socket import * # 1. 创建udp套接字 udp_so ...

  4. java中引用对比C++指针

    前置知识地址:https://blog.csdn.net/wangfei8348/article/details/51383805 重点在后面的引用对比实验(测试出内存地址,我很开心哈哈哈,客观给个好 ...

  5. java常见日期格式转换以及日期的获取

    package com.test.TestBoot.SingleModel;import java.text.SimpleDateFormat;import java.util.Date;public ...

  6. Go:面向"对象"

    一.封装 封装的实现步骤: 将结构体.字段的首字母小写(不能被导出): 给结构体所在的包提供一个工厂模式的函数,首字母大写.类似一个构造函数: 提供一个首字母大写的方法,由于获取结构体属性的值. 二. ...

  7. PHP读取超大的excel文件数据的方案

    场景和痛点 说明 今天因为一个老同学找我,说自己公司的物流业务都是现在用excel处理,按月因为数据量大,一个excel差不多有百万数据,文件有接近100M,打开和搜索就相当的慢 联想到场景:要导入数 ...

  8. python3.6的requests库&HTMLTestRunner实现测试报告

    '''1. 在suite.addTest时,可以把需要的用例先写入一个列表list中,list当做addTest的参数:2. 在unittest.main(verbosity=2)中,默认为1,设置为 ...

  9. 洛谷 3106 [USACO14OPEN]GPS的决斗Dueling GPS's 3720 [AHOI2017初中组]guide

    [题解] 这两道题是完全一样的. 思路其实很简单,对于两种边权分别建反向图跑dijkstra. 如果某条边在某一种边权的图中不是最短路上的边,就把它的cnt加上1.(这样每条边的cnt是0或1或2,代 ...

  10. sort 结构体 正数负数分开排序

    对于结构体排序的一点点记录,之前遇到过结构体排序,个人比较喜欢使用在结构体当中直接重载小于号的方法, 例如说: struct Node{ int index; int del; bool operat ...