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

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

Lecense

MIT