1 | # rc-color-picker
|
2 | ---
|
3 |
|
4 | React Color Picker
|
5 |
|
6 | [![npm version](http://img.shields.io/npm/v/rc-color-picker.svg)](https://www.npmjs.org/package/rc-color-picker)
|
7 | [![npm download](http://img.shields.io/npm/dm/rc-color-picker.svg)](https://www.npmjs.org/package/rc-color-picker)
|
8 | [![npm dependency](https://david-dm.org/react-component/color-picker.svg)](https://david-dm.org/react-component/color-picker)
|
9 |
|
10 | ## Browser Support
|
11 |
|
12 | |![IE](https://raw.github.com/alrra/browser-logos/master/internet-explorer/internet-explorer_48x48.png) | ![Chrome](https://raw.github.com/alrra/browser-logos/master/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/firefox/firefox_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/opera/opera_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/safari/safari_48x48.png)|
|
13 | | --- | --- | --- | --- | --- |
|
14 | | IE 10+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
|
15 |
|
16 | ## Screenshots
|
17 |
|
18 | <img src=https://cloud.githubusercontent.com/assets/1292082/8275606/8608e8f8-18db-11e5-8d10-703253db2a4f.png width=238 />
|
19 |
|
20 | ## Development
|
21 |
|
22 | ```
|
23 | npm install
|
24 | npm start
|
25 | ```
|
26 |
|
27 | ## Example
|
28 |
|
29 | online example: [http://react-component.github.io/color-picker/](http://react-component.github.io/color-picker/)
|
30 |
|
31 | ## Feature
|
32 |
|
33 | * support color mode RGB HSB HSL
|
34 |
|
35 | ## install
|
36 |
|
37 | [![rc-color-picker](https://nodei.co/npm/rc-color-picker.png)](https://npmjs.org/package/rc-color-picker)
|
38 |
|
39 | ## Usage
|
40 |
|
41 | ```js
|
42 | var ColorPicker = require('rc-color-picker');
|
43 | var React = require('react');
|
44 | var ReactDOM = require('react-dom');
|
45 | ReactDOM.render(<ColorPicker />, container);
|
46 | ```
|
47 |
|
48 | ## API
|
49 |
|
50 | ### ColorPicker.props
|
51 |
|
52 | name|type|default|description
|
53 | ---|---|---|---
|
54 | animation | String | | index.css support 'slide-up'
|
55 | transitionName | String | | css class for animation
|
56 | getCalendarContainer| Function():Element | function(){return document.body;} | dom node where picker to be rendered into
|
57 | align | Object: alignConfig of [dom-align](https://github.com/yiminghe/dom-align)| | popup 's align config
|
58 | alpha | Number | 100 | opacity of the color
|
59 | defaultAlpha | Number | 100 | opacity of the color
|
60 | color | String | #ff0000 | color board current background color
|
61 | defaultColor | String | #ff0000 | color board current background color
|
62 | onChange | Function | noop | when select color
|
63 | onOpen | Function | noop | when color picker popup open
|
64 | onClose | Function | noop | when color picker popup close
|
65 | placement | String | topLeft | one of ['topLeft', 'topRight', 'bottomLeft', 'bottomRight']
|
66 | mode | String |'RGB' | color mode, support mode 'RGB', 'HSB' or 'HSL'
|
67 | children | Node |`<span className='react-colorpicker-trigger'></span>`|additional trigger appended to picker
|
68 |
|
69 |
|
70 | ### ColorPicker.Panel.props
|
71 |
|
72 | name|type|default|description
|
73 | ---|---|---|---
|
74 | alpha | Number | 100 | opacity of the color
|
75 | defaultAlpha | Number | 100 | opacity of the color
|
76 | color | String | #ff0000 | color board current background color
|
77 | defaultColor | String | #ff0000 | color board current background color
|
78 | style | Object | {} | root node CSS style
|
79 | onChange | Function| | when select color trigger
|
80 | onFocus | Function| | when picker focus trigger
|
81 | onBlur | Function| | when picker loose focus
|
82 | mode | String |'RGB' | color mode, support mode 'RGB', 'HSB' or 'HSL'
|
83 |
|
84 | ## License
|
85 |
|
86 | rc-color-picker is released under the MIT license.
|