ray-color-panel

install

npm i --save ray-color-panel

usage

• ColorPanel
• ColorPicker

ColorPanel

• basic

import ColorPanel from 'ray-color-panel';

class BasicDemo extends React.PureComponent {

  public render() {
    return (
      <ColorPanel />
    );
  }
}

• ColorPicker

import { ColorPicker } from 'ray-color-panel';

class ColorPickerDemo extends Component {
  render() {
    return (
      <ColorPicker trigger="click">
        <div>点击</div>
      </ColorPicker>
    );
  }
}

ColorPanel props

| params | type | default | description | |------|------|------|------| | prefixCls | string | ray-color-picker-panel | | | style | object | - | 自定义样式 | | className | string | - | 自定义class 名 | | alpha | number | - | 透明度值 | | color | typeColor | - | 颜色值 | | defaultAlpha | number | 100 | | | defaultColor | typeColor | '#ff0000' | | | enableAlpha | bool | true | 启用 alpha | | onBlur | func | noop | 失去焦点回调 | | onChange | func | noop | color值改变回调 | | onFocus | func | noop | 聚焦回调 | | onMount | func | noop | 组件挂在到dom后的回调 | | mode | string | RGB | 可选值 'RGB', 'HSL', 'HSB' |

ColorPicker props

|params|type|default|description| |------|------|------|------| | prefixCls | string | ray-color-picker | 样式前缀 | | style | object | - | 自定义样式 | | className | string | - | 自定义class 名 | | children | RactNode | <span className="ray-color-picker-dropdown-toggle" /> | 触发colorpicker node | | disabled | bool | - | 禁用 | | visible | bool | false | 显示 | | onVisibleChange | func | noop | 显隐回调 | | onChange | func | noop | color值改变时回调 | | trigger | string | hover | 触发方式，可选值 'click', 'hover' | | enableAlpha | bool | - | 启用 alpha | | mode | string | RGB | 可选值 'RGB', 'HSL', 'HSB' | | defaultColor | string | '#F00' | 默认颜色 | | defaultAlpha | number | 100 | 默认透明度 | | alpha | number | - | 透明度值 | | color | string | - | 颜色值 |

changelog

• 20220217 v1.1.5 modify gradient color bugs
• 20210223 v1.1.2 modify color panel bugs
• 20210206 v1.1.1 add gradient color
• 20180918 v1.0.0 add color panel

Lecense

MIT