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. java.util.MissingResourceException: Can't find bundle for base name db, locale zh_CN

    在使用Bundle来加载配置文件的时候, 爆出了这个错误: 原因? 没有找到需要加载的配置文件,因为配置文件必须放在src目录下面, 如果放进了com.bj186.crm的包下面,就必须添加包的名称到 ...

  2. 关闭警告&关闭eslint

    1.main.js中添加 vue.config.productiontip = false  这样即可去除警告!  第一个除了那个配置意外,还需要将 NODE_ENV 设置为 production 参 ...

  3. JavaSE-11 接口

    学习要点 接口的定义 接口作为约定 接口作为能力 接口 为什么使用接口 需求描述 要求实现防盗门的功能(防盗门:带锁的门). 需求分析 门有“开”和“关”的功能,锁有“上锁”和“开锁”的功能. 将门和 ...

  4. Solaris 默认Shell 修改

    ssh登陆远程的solaris 10,backspace出现乱码. ssh登陆远程的solaris 10默认Shell不是bash 把solaris10的shell环境改为bash就行 dev13% ...

  5. babun

    ‎ Table of Contents 1. 环境 2. 检查/更新 3. 包管理 4. 版本管理 Git 4.1. 设置姓名邮箱(全局方式) 4.2. 添加 SSH 4.3. 链接测试 4.4. 权 ...

  6. jquery ajax 同步异步的执行

    jquery ajax 同步异步的执行   大家先看一段简单的jquery ajax 返回值的js 代码 function getReturnAjax{  $.ajax({    type:" ...

  7. 负对数似然(negative log-likelihood)

    negative log likelihood文章目录negative log likelihood似然函数(likelihood function)OverviewDefinition离散型概率分布 ...

  8. 禁止浏览器static files缓存篇

    由于CSS/JS文件经常需要改动,前端调试时是不希望浏览器缓存这些文件的. Meta法 目前在chrome调试还没有遇到问题,好用!此方法假设浏览器是个好人!很听我们的话! <meta http ...

  9. JavaScript中数据类型的转换规则

    JavaScript中数据类型的转换规则 制作人:全心全意 JavaScript是一种无类型语言,也就是说,在声明变量时无须指定数据类型,这使得JavaScript更具有灵活性和简单性. 在代码执行过 ...

  10. BNUOJ 26229 Red/Blue Spanning Tree

    Red/Blue Spanning Tree Time Limit: 2000ms Memory Limit: 131072KB This problem will be judged on HDU. ...