vector-color-picker

---

基于 rc-color-picker 二次开发的 Vector Color Picker.

1. 支持 "HEX", "CSS", "RGB", "HSL", "HSB" 色彩类型，以及模式切换。
2. 色彩类型支持手动修改，onchange 只改变显示，回车或失焦时，校验并保存数据，校验不合法恢复修改前数值。

Browser Support

Chrome 31.0+ ✔	Edge 12.0+ ✔	Firefox 31.0+ ✔	IE 10+ ✔	Opera 30.0+ ✔	Safari 7.0+ ✔

Screenshots

Development

npm install
npm start

Example

online example: https://dahui4dev.github.io/vector-color-picker/

Feature

• support color mode HEX CSS RGB HSB HSL

install

Usage

var ColorPicker = require('vector-color-picker');
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(<ColorPicker />, container);

API

ColorPicker.props

name	type	default	description
align	Object: alignConfig of dom-align		popup 's align config dom-align
alpha	Number	100	opacity of the color
animation	String		index.css support 'slide-up'
children	Node	<span className='react-colorpicker-trigger'></span>	additional trigger appended to picker
className	String	''	Aditional class to be added to component
color	String	#ff0000	color board current background color
defaultAlpha	Number	100	opacity of the color
defaultColor	String	#ff0000	color board current background color
enableAlpha	Boolean	true	enable alpha controls
getPopupContainer	Function():Element	function(){return document.body;}	dom node where picker to be rendered into
mode	String	RGB	color mode, support mode 'RGB', 'HSB', 'HSL', 'HEX'
onChange	Function	noop	when select color ({color: string, alpha: number}) => void
onClose	Function	noop	when color picker popup close
onOpen	Function	noop	when color picker popup open
placement	String	topLeft	one of ['topLeft', 'topRight', 'bottomLeft', 'bottomRight']
transitionName	String		css class for animation

ColorPicker.Panel.props

name	type	default	description
alpha	Number	100	opacity of the color
className	String	''	Additional class to be added to component
color	String	#ff0000	color board current background color
defaultAlpha	Number	100	opacity of the color
defaultColor	String	#ff0000	color board current background color
enableAlpha	Boolean	true	enable alpha controls
mode	String	RGB	color mode, support mode 'RGB', 'HSB', 'HSL', 'HEX', 'CSS'
onBlur	Function		when picker loose focus
onChange	Function		when select color trigger ({color: string, alpha: number}) => void
onFocus	Function		when picker focus trigger
onAbsorption	Function		When absorption is triggered, re-pass the absorbed color to the color property, ({color: string, alpha: number}) => void
style	Object	{}	root node CSS style

License

vector-color-picker is released under the MIT license.