# hptcolorpicker

**Repository Path**: iJianbao/gancao-hptcolorpicker

## Basic Information

- **Project Name**: hptcolorpicker
- **Description**: 鸿蒙颜色选择器
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2025-01-21
- **Last Updated**: 2025-06-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# hptcolorpicker

#### 介绍
harmony 颜色选择器

<img src="https://storage1.igancao.com/GC/M00/5E/3/dd32d55cedb33f62a62e8563cee6b49d.png" width="150px" />
<img src="https://storage1.igancao.com/GC/M00/C1/CF/d7ea179f31b9685a8d38d376b04747df.png" width="150px" />
<img src="https://storage1.igancao.com/GC/M00/57/80/3e78d9a4a8705b55e88bb61020102834.png" width="150px" />

#### 软件架构
软件架构说明


#### 安装教程

`ohpm install @gancao/hptcolorpicker`

#### 使用说明

```c
@State private selHsv: [number, number, number] = [0, 1, 1]
@State private selOpacity: number = 100

HPTColorSel({
  selHsv: this.selHsv,
  selOpacity: this.selOpacity,
  changeColorBlock: (value) => {
    console.log(value)
  }
})
```

单独使用
```c
HPTColorGrid({
    colorArray: [
      '#029FD6',
      '#0062FD',
      '#5023B1',
      '#962BB9',
      '#BA2C5E',
      '#FB431B',
    ],
    gridRowCount: 3,
    selHsv: this.selHsv,
    selOpacity: this.selOpacity,
    opacityHeight: 20,
    opacityInputWidth: 40
  })
    .height('70%')
    .width('70%')
```

```c
HPTColorRgbSlider({
    selHsv: this.selHsv,
    selOpacity: this.selOpacity,
    opacityHeight: 20,
    colorSliderHeight: 20,
    sliderAspectRatio: 2.0,
    titleOnTop: false,
    titleSpace: 8
})
    .height('70%')
    .width('70%')
```

```c
HPTLightSpectrum({
    lightSpectrumSpotSize: 20,
    selHsv: this.selHsv,
    selOpacity: this.selOpacity,
    opacityHeight: 20,
    opacityInputWidth: 40
})
    .height('70%')
    .width('70%')
```

#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request


#### 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)