Ray-color-panel NPM

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	-	颜色值