Vector-color-picker NPM

vector-color-picker

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

支持 "HEX", "CSS", "RGB", "HSL", "HSB" 色彩类型，以及模式切换。
色彩类型支持手动修改，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