https://github.com/originring/ng-color-picker
ng-color-picker
https://github.com/originring/ng-color-picker
antd-color-picker color color-picker ng-antd-color-picker ng-color-picker ngx-color-picker
Last synced: about 2 months ago
JSON representation
ng-color-picker
- Host: GitHub
- URL: https://github.com/originring/ng-color-picker
- Owner: OriginRing
- License: mit
- Created: 2023-07-27T06:52:22.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2023-11-29T02:57:19.000Z (over 1 year ago)
- Last Synced: 2025-03-24T07:43:54.578Z (2 months ago)
- Topics: antd-color-picker, color, color-picker, ng-antd-color-picker, ng-color-picker, ngx-color-picker
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/ng-antd-color-picker
- Size: 144 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# NgAntdColorPicker
## Introduction
The angular version of the color-picker component based on antd styles.
Angular version >= 17 [](https://www.npmjs.com/package/ng-antd-color-picker)
Angular version 16 (0.0.2)
Angular version 15 (0.0.1)
## Development
```
git clone https://github.com/OriginRing/ng-color-picker.git
npm install
## build
npm run build
cd dist/ng-antd-color-picker
npm pack
## install ng-antd-color-picker-${version}.tgz
npm install dist/ng-antd-color-picker/ng-antd-color-picker-${version}.tgz
## start
npm run start
## test
npm run test
```
## Installation
```shell
npm install ng-antd-color-picker
```
## Usage
```javascript
standalone:
import { NgAntdColorPickerComponent, NgAntdColorBlockComponent } from 'ng-antd-color-picker';
module:
import { NgAntdColorPickerModule } from 'ng-antd-color-picker';
```
- Basic
- Custom Header / Footer
- Color Block
## API
### ng-antd-color-picker
| Parameter | Description | Type | Default |
|--------------------|--------------------------------------|-----------------------------|---------|
| `[value]` | Value of color | `string`｜`ColorValue` | - |
| `[defaultValue]` | Default value of color | `string`｜`ColorValue` | - |
| `[disabled]` | Disable ColorPicker | `boolean` | `false` |
| `[disabledAlpha]` | Disable Transparency | `boolean` | `false` |
| `[panelRenderHeader]` | Set the header of the color picker| `TemplateRef` | - |
| `[panelRenderFooter]` | Set the tail of the color picker | `TemplateRef` | - |
| `(nzOnChange)` | Callback when value is changed | `EventEmitter<{ color: Color; type?: HsbaColorType }>` | - |
| `(nzOnChangeComplete)` | Called when clear | `EventEmitter` | - |
### ng-antd-color-block
| Parameter | Description | Type | Default |
|--------------|----------|------------|-----------|
| `[color]` | Module colors | `string` | `#1677ff` |
| `[nzOnClick]` | Callbacks for clicking on color blocks | `EventEmitter` | - |