react-color 颜色选择器组件
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 颜色选择器组件的更多相关文章
- React Color使用
需求 - 要在react项目中实现颜色获取器功能 解决方案 - 使用react-color 依赖 - git地址:https://github.com/casesandberg/react-color ...
- HTML5的input color系统颜色选择器
前两天,我写了一篇<推荐两款jQuery色盘选择器>介绍,那是使用JavaScript实现的色盘,今天我给大家介绍HTML5的色盘选择器.HTML5有一个input类型为color,即颜色 ...
- 基于vue的颜色选择器color-picker
项目中有用到颜色选择器的童鞋们可以看过来了 关于color-picker的jquery的插件是有蛮多,不过vue组件没有吧,反正我没有找到, 虽然element-ui里面有这个,但是你愿意为了一个小功 ...
- 10个精选的颜色选择器Javascript脚本及其jQuery插件
Color picker即颜色选择器使我们在web开发中可能经常用到的组件,今天我们特意精选了10个超酷的颜色选择器实现,其中包括了javascript脚本 实现及其传说中的jQuery插件实现 ...
- 基于vue的颜色选择器vue-color-picker
项目中有用到颜色选择器的童鞋们可以看过来了 关于color-picker的jquery的插件是有蛮多,不过vue组件没有吧,反正我没有找到, 虽然element-ui里面有这个,但是你愿意为了一个小功 ...
- 【canvas系列】用canvas实现一个colorpicker(类似PS的颜色选择器)
每个浏览器都有自己的特点,比如今天要做的colorpicker就是,一千个浏览器,一千个哈姆雷特,一千个colorpicker.今天canvas系列就用canvas做一个colorpicker. ** ...
- 11个JavaScript颜色选择器插件
几年前,很难找到一个合适的颜色选择器.正好看到很多不错的JavaScript颜色选择器插件,故而把这些编译汇总.在本文,Web设计师和开发人员 Kevin Liew 选取了11个相应插件,有些会比较复 ...
- UWP 颜色选择器(ColorPicker) 和 自定义的Flyout(AdvancedFlyout)
ColorPicker 故事背景 项目里面需要一个像Winfrom里面那样的颜色选择器,如下图所示: 在网上看了一下.没有现成的东东可以拿来使用.大概查看了一下关于颜色的一些知识,想着没人种树,那就由 ...
- 改造过的JS颜色选择器
项目中用到颜色选择功能,在网上找了个颜色选择器,自己改了改代码.做成了一个可动态加载的颜色选择器. 把代码贴上,当是记录. /*Copyright(c)2009,www.supersite.me*/ ...
随机推荐
- SpringBoot中部署Swagger2和Swagger-UI
1 Gradle配置在dependencies中添加以下依赖: implementation("io.springfox:springfox-swagger2:2.7.0") im ...
- HTTP实验:分别使用httpd-2.2和httpd-2.4实现
1. 需求描述 1.建立httpd服务,要求: (1) 提供两个基于名称的虚拟主机: www1.stuX.com,页面文件目录为/web/vhosts/www1:错误日志为/var/log/httpd ...
- python 网络编程基础
1. 内容回顾补充 [] [^] 带有特殊意义的元字符到字符组内大部分都会取消它的特殊意义. 会取消的: [()+*.] -[(-)] -的位置决定了它的意义,写在字符组的第一个位置/最后一个位置就表 ...
- oracle 11g完全卸载
oracle 11g release2的完全卸载方式与前些版本有了改变,自带了一个卸载批处理文件——deinstall.bat.(这个工具可以从oracle的home进行完全的卸载,不管是单实例ora ...
- win10 默认锁屏路径
C:\Users\YourUsername\AppData\Local\Packages\Microsoft.Windows.ContentDeliveryManager_cw5n1h2txyewy\ ...
- 动态规划法解最长公共子序列<算法分析>
一.实验内容及要求 1.要求按动态规划法原理求解问题: 2.要求在20以内整数随机产生两个序列数据: 3.要求显示随机产生的序列及最长公共子序列.二.实验步骤 1.随机产生数列: 2.输出随机序列: ...
- 听dalao讲课 7.26
XFZ今天讲了些关于多项式求ln和多项式求导以及多项式求积分的东西 作为一个连导数和积分根本就不会的蒟蒻,就像在听天书,所以不得不补点前置知识 1.积分 积分是微积分学与数学分析里的一个核心概念.通常 ...
- 【BZOJ2818】Gcd(莫比乌斯反演,欧拉函数)
题意:给定整数N,求1<=x,y<=N且Gcd(x,y)为素数的数对(x,y)有多少对 1<=N<=10^7 思路:莫比乌斯反演,同BZOJ2820…… ; ..max]of ...
- POJ 2828 Buy Tickets (线段树 || 树状数组)
题目大意 一些小朋友在排队,每次来一个人,第i个人会插到第x个人的后面.权值为y.保证x∈[0,i-1]. 按照最后的队伍顺序,依次输出每个人的权值. 解题分析 好气吖.本来是在做splay练习,然后 ...
- Thinkphp5.0 视图view取值
Thinkphp5.0 视图view取值 <!-- 获取控制器传递的变量 --> <li>{$age}</li> <!-- 获取服务器的信息 --> & ...