# ray-color-panel

> color picker

Latest version **1.2.0** (published 2024-03-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install ray-color-panel
pnpm add ray-color-panel
yarn add ray-color-panel
bun add ray-color-panel
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2024-03-05 |
| First published | 2018-09-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 151.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ilex |
| Maintainers | ilex.h |

## Links

- npm: https://www.npmjs.com/package/ray-color-panel
- npm.io page: https://npm.io/package/ray-color-panel

## Dependencies (4)

- [dt2react](https://npm.io/package/dt2react.md) ^2.x
- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.1
- [ray-visutil](https://npm.io/package/ray-visutil.md) ^1.3.0

## Recent versions

- 1.2.0 (latest) — 2024-03-05
- 1.1.5 — 2022-02-17
- 1.1.4 — 2021-05-18
- 1.1.3 — 2021-04-27
- 1.1.2 — 2021-02-23
- 1.1.1 — 2021-02-06
- 1.1.0 — 2021-02-06
- 1.0.0 — 2018-09-14

## README

# ray-color-panel

## install

npm i --save ray-color-panel

## usage

* ColorPanel
* ColorPicker

### ColorPanel

- basic

```js
import ColorPanel from 'ray-color-panel';

class BasicDemo extends React.PureComponent {

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

- ColorPicker

```js
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

---
_Source: https://npm.io/package/ray-color-panel · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._