Skip to content

OriginRing/ng-color-picker

Repository files navigation

NgAntdColorPicker

Introduction

The angular version of the color-picker component based on antd styles.

Angular version >= 17 npm package

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

npm install ng-antd-color-picker

Usage

standalone:
import { NgAntdColorPickerComponent, NgAntdColorBlockComponent } from 'ng-antd-color-picker';
module:
import { NgAntdColorPickerModule } from 'ng-antd-color-picker';

<ng-antd-color-picker></ng-antd-color-picker>

<ng-antd-color-block color="#ff6600"></ng-antd-color-block>
  • Basic

    basic
  • Custom Header / Footer

    basic
  • Color Block

    basic

API

ng-antd-color-picker

Parameter Description Type Default
[value] Value of color stringColorValue -
[defaultValue] Default value of color stringColorValue -
[disabled] Disable ColorPicker boolean false
[disabledAlpha] Disable Transparency boolean false
[panelRenderHeader] Set the header of the color picker TemplateRef<void> -
[panelRenderFooter] Set the tail of the color picker TemplateRef<void> -
(nzOnChange) Callback when value is changed EventEmitter<{ color: Color; type?: HsbaColorType }> -
(nzOnChangeComplete) Called when clear EventEmitter<HsbaColorType> -

ng-antd-color-block

Parameter Description Type Default
[color] Module colors string #1677ff
[nzOnClick] Callbacks for clicking on color blocks EventEmitter<boolean> -