vector-color-picker@1.0.8

EXAMPLES

README.md

vector-color-picker

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

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

npm version npm download

Browser Support

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

Screenshots

image

Development

npm install
npm start

Example

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

Feature

install

vector-color-picker

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.

Fork me on GitHub