Color Picker

Another beautiful color picker

Quick links

Documentation | Playground

Installation

npm install @acrodata/color-picker --save

Usage

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ColorPicker } from '@acrodata/color-picker';

@Component({
  selector: 'your-app',
  template: `
    <color-picker [(ngModel)]="color" />
    <color-picker [(color)]="color" />
  `,
  imports: [FormsModule, ColorPicker],
})
export class YourAppComponent {
  color = '#ff0000';
}

API

Name	Type	Default	Description
[color]	string	#000	The initial color string.
[format]	ColorFormat	undefined	The output format of the color picker.
[disableAlpha]	boolean	false	Whether to hide the alpha channel.
(colorChange)	EventEmitter	-	Event emitted when the color string is changed.
(formatChange)	EventEmitter	-	Event emitted when the color format is changed.
(valueChange)	EventEmitter	-	Event emitted when the color changes.
(valueChanged)	EventEmitter	-	Event emitted when the color change is finalized.

CSS Variables

--cp-container-width
--cp-container-shape
--cp-container-padding
--cp-container-margin
--cp-container-elevation-shadow
--cp-container-background-color

--cp-input-shape
--cp-input-background-color
--cp-input-outline-color
--cp-input-hover-outline-color
--cp-input-focus-outline-color
--cp-input-text-font

--cp-icon-button-shape
--cp-icon-button-text-color
--cp-icon-button-background-color
--cp-icon-button-hover-background-color
--cp-icon-button-active-background-color
--cp-icon-button-focus-background-color
--cp-icon-button-focus-outline-color

--cp-slider-width
--cp-slider-height
--cp-slider-shape
--cp-slider-thumb-width
--cp-slider-thumb-height
--cp-slider-thumb-shape
--cp-slider-thumb-background-color
--cp-slider-thumb-shadow

License

MIT