1.1.4 • Published 7 years ago
@canner/rc-color-picker v1.1.4
rc-color-picker
React Color Picker
Browser Support
 |  |  |  |  |
|---|---|---|---|---|
| IE 10+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
Screenshots
Development
npm install
npm startExample
online example: http://react-component.github.io/color-picker/
Feature
- support color mode RGB HSB HSL
install
Usage
var ColorPicker = require('rc-color-picker');
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(<ColorPicker />, container);API
ColorPicker.props
| name | type | default | description |
|---|---|---|---|
| animation | String | index.css support 'slide-up' | |
| transitionName | String | css class for animation | |
| getCalendarContainer | Function():Element | function(){return document.body;} | dom node where picker to be rendered into |
| align | Object: alignConfig of dom-align | popup 's align config | |
| alpha | Number | 100 | opacity of the color |
| defaultAlpha | Number | 100 | opacity of the color |
| color | String | #ff0000 | color board current background color |
| defaultColor | String | #ff0000 | color board current background color |
| onChange | Function | noop | when select color |
| onOpen | Function | noop | when color picker popup open |
| onClose | Function | noop | when color picker popup close |
| placement | String | topLeft | one of 'topLeft', 'topRight', 'bottomLeft', 'bottomRight' |
| mode | String | 'RGB' | color mode, support mode 'RGB', 'HSB' or 'HSL' |
| children | Node | <span className='react-colorpicker-trigger'></span> | additional trigger appended to picker |
ColorPicker.Panel.props
| name | type | default | description |
|---|---|---|---|
| alpha | Number | 100 | opacity of the color |
| defaultAlpha | Number | 100 | opacity of the color |
| color | String | #ff0000 | color board current background color |
| defaultColor | String | #ff0000 | color board current background color |
| style | Object | {} | root node CSS style |
| onChange | Function | when select color trigger | |
| onFocus | Function | when picker focus trigger | |
| onBlur | Function | when picker loose focus | |
| mode | String | 'RGB' | color mode, support mode 'RGB', 'HSB' or 'HSL' |
License
rc-color-picker is released under the MIT license.