@gem-mine/rc-color-picker v1.0.2

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

ColorPicker.Panel.props