react-color-picler

---

React Color Pocker

fork from rc-color-picker

何时使用

• 从一组颜色中进行选择，用于改变元素的颜色或背景色

浏览器支持

IE 9+

安装

1npm install @gem-mine/rc-color-picker --save

运行

1# 默认开启服务器，地址为 ：http://local:8000/
2
3# 能在ie9+下浏览本站，修改代码后自动重新构建，且能在ie10+运行热更新，页面会自动刷新
4npm run start
5
6# 构建生产环境静态文件，用于发布文档
7npm run site

代码演示

在线示例：https://gem-mine.github.io/rc-color-picker/site/

anim

1import '@gem-mine/rc-color-picker/lib/style/'
2import ColorPicker from '@gem-mine/rc-color-picker'
3
4function changeHandler(colors) {
5  console.log(colors);
6}
7
8ReactDOM.render(
9  <div style={{ margin: '20px 20px 20px', textAlign: 'center' }}>
10    <ColorPicker
11      animation="slide-up"
12      color={'#36c'}
13      onChange={changeHandler}
14    />
15  </div>
16, mountNode)

custom-trigger

1import '@gem-mine/rc-color-picker/lib/style/'
2import ColorPicker from '@gem-mine/rc-color-picker'
3
4function changeHandler(colors) {
5  console.log(colors);
6}
7
8ReactDOM.render(
9  <div style={{ textAlign: 'center' }}>
10    <ColorPicker
11      color={'#36c'}
12      onChange={changeHandler}
13    >
14      <span>choose color</span>
15    </ColorPicker>
16  </div>
17, mountNode)

panel

1import '@gem-mine/rc-color-picker/lib/style/'
2import { Panel as ColorPickerPanel } from '@gem-mine/rc-color-picker'
3
4function onChange(obj) {
5  console.log(obj);
6}
7
8ReactDOM.render(
9  <div style={{ backgroundColor: '#ddd', padding: 20 }}>
10    <ColorPickerPanel
11      enableAlpha={false}
12      color={'#D0021B'}
13      onChange={onChange}
14      mode="RGB"
15    />
16    <hr />
17    <ColorPickerPanel
18      alpha={80}
19      color={'#D0021B'}
20      onChange={onChange}
21      mode="HSB"
22    />
23  </div>
24, mountNode)

no-presetColors

1import '@gem-mine/rc-color-picker/lib/style/'
2import { Panel as ColorPickerPanel } from '@gem-mine/rc-color-picker'
3
4function onChange(obj) {
5  console.log(obj);
6}
7
8ReactDOM.render(
9  <div style={{ backgroundColor: '#ddd', padding: 20 }}>
10    <ColorPickerPanel
11      enableAlpha={false}
12      color={'#D0021B'}
13      onChange={onChange}
14      mode="RGB"
15      presetColors={[]}
16    />
17  </div>
18, mountNode)

simple

1import '@gem-mine/rc-color-picker/lib/style/'
2import ColorPicker from '@gem-mine/rc-color-picker'
3
4function changeHandler(colors) {
5  console.log(colors);
6}
7
8function closeHandler(colors) {
9  console.log(colors);
10}
11
12ReactDOM.render(
13  <div style={{ margin: '20px 20px 20px', textAlign: 'center' }}>
14    <h4>topLeft</h4>
15    <ColorPicker
16      color={'#36c'}
17      alpha={30}
18      onChange={changeHandler}
19      onClose={closeHandler}
20      placement="topLeft"
21      className="some-class"
22    >
23      <span className="rc-color-picker-trigger" />
24    </ColorPicker>
25    <h4>topRight</h4>
26    <ColorPicker
27      color={'#F10'}
28      onChange={changeHandler}
29      placement="topRight"
30    />
31    <h4>bottomLeft</h4>
32    <ColorPicker
33      color={'#0ad'}
34      alpha={50}
35      onChange={changeHandler}
36      placement="bottomLeft"
37    />
38    <h4>bottomRight</h4>
39    <ColorPicker
40      color={'#0F0'}
41      onChange={changeHandler}
42      placement="bottomRight"
43    />
44  </div>
45, 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