# ColorPicker (API12)

[![issue](https://img.shields.io/badge/1.0.4-issues-blue)](https://gitee.com/oh_keke/keke/issues)

## 简介

ColorPicker 是一款简洁的颜色选择器组件，基于 HSB 色彩模型设计。使用 @ComponentV2 开发，V1 用户请参考[自定义组件混用场景指导](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-custom-component-mixed-scenarios-V5)。

## 安装

````ohpm i @keke/color-picker````

OpenHarmony ohpm 环境配置等更多内容，请参考[如何安装 OpenHarmony ohpm 包](https://ohpm.openharmony.cn/#/cn/help/downloadandinstall)

## 用法

引入组件
````
import { HSBColorPicker } from '@keke/color-picker'
````

### 基础用法
````
HSBColorPicker({
  color: '#8b27f4',
})
.height(170)
````

![基础用法](https://img.vinua.cn/images/IRxhl.png)

### 选择透明度
````
HSBColorPicker({
  color: '#8b27f4',
  showAlpha: true,
})
.height(200)
````

![选择透明度](https://img.vinua.cn/images/IRAti.png)

### 设置间距
````
HSBColorPicker({
  color: '#8b27f4',
  gutter: 0,
  showAlpha: true,
})
.height(200)
````

![设置圆角](https://img.vinua.cn/images/IRu9Y.png)

### 设置圆角
````
HSBColorPicker({
  color: '#8b27f4',
  radius: 8,
  showAlpha: true,
})
.height(200)
````

![设置圆角](https://img.vinua.cn/images/IRPlD.png)

### 纵向布局
````
import { HSBColorPicker, HSBColorPickerLayout } from '@keke/color-picker'

HSBColorPicker({
  layout: HSBColorPickerLayout.COLUMN,
  color: '#8b27f4',
  radius: 8,
  showAlpha: true,
})
.height(200)
````

![纵向布局](https://img.vinua.cn/images/IRiPL.png)

### 指定亮度范围
````
HSBColorPicker({
  color: '#8b27f4',
  radius: 8,
  b: [70, 100],
  showAlpha: true,
})
.height(200)
````

![指定亮度范围](https://img.vinua.cn/images/IRQ9U.png)

### 预定义颜色
````
HSBColorPicker({
  color: '#8b27f4',
  radius: 8,
  showAlpha: true,
  predefine: ['#8b27f4', '#73f9fc', '#fffe55', '#f5cee3', '#eb4827', '#e93bf4', '#3e68f4', '#c5e6d3', '#e4e4e4', '#fa7105'],
})
.height(270)
````

![预定义颜色](https://img.vinua.cn/images/IRUO1.png)

## APIs

| 参数名       | 类型                      | 必填 | 说明                              |
|-----------|-------------------------|---|---------------------------------|
| color     | string                  | 否 | 初始颜色值，默认 #ffffff                | 
| gutter    | number                  | 否 | 设置滑块之间的间距，默认 8                  |
| radius    | number                  | 否 | 圆角大小，默认无圆角                      |
| showAlpha | boolean                 | 否 | 是否显示透明度滑块，默认 false              |
| layout    | HSBColorPickerLayout    | 否 | 布局样式，DEFAULT、COLUMN，默认为 DEFAULT |
| predefine | string[]                | 否 | 预定义的颜色                          |
| s         | [number, number]        | 否 | 饱合度 [0-100]                     |
| b         | [number, number]        | 否 | 亮度 [0-100]                      |
| onChange  | (value: string) => void | 否 | 选择颜色回调                          |

## 其他

### Slider2 组件

`Slider2` 组件，支持横竖向拖拽，设置背景渐变等，具体用法如下：

````
Slider2({
  x: number, // 0-1
  y: number, // 0-1
  radius: number,
  blockSize: number,
  slideDirection: SlideDirection,
  track: () => void, // @BuilderParam
  trackLinearGradient: LinearGradient,
  trackBackgroundColor: ResourceColor,
  dragStart: (x: number, y: number) => void,
  dragMove: (x: number, y: number) => void,
  dragEnd: (x: number, y: number) => void,
  onChange: (x: number, y: number) => void,
})
````

### 颜色工具方法

````
hsv2rgb: hsv 转 rgb
rgb2hex: rgb 转 hex
rgb2hsv: rgb 转 hsv
hex2rgb: hex 转 rgb
hex2rgba: hex 转 rgba
hex2hsv: hex 转 hsv
hex2hexa: hex 转 hexa
hsva2hex: hsva 转 hex
hex2hsva: hex 转 hsva
formatHex: 格式化hex颜色值，返回 [6位hex颜色值, 透明度]。支持3、4、6、8位颜色解析。
````

## License

The repository is based on [MIT](https://gitee.com/oh_keke/keke/blob/main/SlideToUnlock/LICENSE).