react-color-picler
React Color Pocker
fork from rc-color-picker
何时使用
- 从一组颜色中进行选择，用于改变元素的颜色或背景色
浏览器支持
IE 9+
安装
npm install @gem-mine/rc-color-picker --save运行
# 默认开启服务器，地址为 ：http://local:8000/
# 能在ie9+下浏览本站，修改代码后自动重新构建，且能在ie10+运行热更新，页面会自动刷新
npm run start
# 构建生产环境静态文件，用于发布文档
npm run site代码演示
在线示例：https://gem-mine.github.io/rc-color-picker/site/
anim
import '@gem-mine/rc-color-picker/lib/style/'
import ColorPicker from '@gem-mine/rc-color-picker'
function changeHandler(colors) {
console.log(colors);
}
ReactDOM.render(
<div style={{ margin: '20px 20px 20px', textAlign: 'center' }}>
<ColorPicker
animation="slide-up"
color={'#36c'}
onChange={changeHandler}
/>
</div>
, mountNode)custom-trigger
import '@gem-mine/rc-color-picker/lib/style/'
import ColorPicker from '@gem-mine/rc-color-picker'
function changeHandler(colors) {
console.log(colors);
}
ReactDOM.render(
<div style={{ textAlign: 'center' }}>
<ColorPicker
color={'#36c'}
onChange={changeHandler}
>
<span>choose color</span>
</ColorPicker>
</div>
, mountNode)panel
import '@gem-mine/rc-color-picker/lib/style/'
import { Panel as ColorPickerPanel } from '@gem-mine/rc-color-picker'
function onChange(obj) {
console.log(obj);
}
ReactDOM.render(
<div style={{ backgroundColor: '#ddd', padding: 20 }}>
<ColorPickerPanel
enableAlpha={false}
color={'#D0021B'}
onChange={onChange}
mode="RGB"
/>
<hr />
<ColorPickerPanel
alpha={80}
color={'#D0021B'}
onChange={onChange}
mode="HSB"
/>
</div>
, mountNode)no-presetColors
import '@gem-mine/rc-color-picker/lib/style/'
import { Panel as ColorPickerPanel } from '@gem-mine/rc-color-picker'
function onChange(obj) {
console.log(obj);
}
ReactDOM.render(
<div style={{ backgroundColor: '#ddd', padding: 20 }}>
<ColorPickerPanel
enableAlpha={false}
color={'#D0021B'}
onChange={onChange}
mode="RGB"
presetColors={[]}
/>
</div>
, mountNode)simple
import '@gem-mine/rc-color-picker/lib/style/'
import ColorPicker from '@gem-mine/rc-color-picker'
function changeHandler(colors) {
console.log(colors);
}
function closeHandler(colors) {
console.log(colors);
}
ReactDOM.render(
<div style={{ margin: '20px 20px 20px', textAlign: 'center' }}>
<h4>topLeft</h4>
<ColorPicker
color={'#36c'}
alpha={30}
onChange={changeHandler}
onClose={closeHandler}
placement="topLeft"
className="some-class"
>
<span className="rc-color-picker-trigger" />
</ColorPicker>
<h4>topRight</h4>
<ColorPicker
color={'#F10'}
onChange={changeHandler}
placement="topRight"
/>
<h4>bottomLeft</h4>
<ColorPicker
color={'#0ad'}
alpha={50}
onChange={changeHandler}
placement="bottomLeft"
/>
<h4>bottomRight</h4>
<ColorPicker
color={'#0F0'}
onChange={changeHandler}
placement="bottomRight"
/>
</div>
, mountNode)API
ColorPicker.props
| name | type | default | description |
|---|---|---|---|
| align | Object: alignConfig of dom-align | popup 's align config | |
| 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 |
| getCalendarContainer | Function():Element | function(){return document.body;} |
dom node where picker to be rendered into |
| mode | String | RGB |
color mode, support mode 'RGB', 'HSB' |
| onChange | Function | noop | when select color |
| 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 | '' |
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 |
| mode | String | RGB |
color mode, support mode 'RGB', 'HSB' |
| onBlur | Function | when picker loose focus | |
| onChange | Function | when select color trigger | |
| onFocus | Function | when picker focus trigger | |
| style | Object | {} |
root node CSS style |
| presetColors | string[] | ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF'] | preset colors to be selected |