Color Picker
Another beautiful color picker
Quick links
Compatibility
| Angular | @acrodata/color-picker |
|---|---|
| >=17 | 1.x |
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 [(value)]="color" />
`,
imports: [FormsModule, ColorPicker],
})
export class YourAppComponent {
color = '#ff0000';
}
API
| Name | Type | Default | Description |
|---|---|---|---|
| [value] | string | #000 | The initial color string. |
| [format] | ColorFormat | undefined | The output format of the color picker. |
| [hideAlpha] | boolean | false | Whether to hide the alpha channel. |
| (formatChange) | EventEmitter<ColorFormat> | - | Event emitted when the color format is changed. |
| (valueChange) | EventEmitter<string> | - | Event emitted when the value changes. |
| (valueChangeComplete) | EventEmitter<string> | - | Event emitted when the value changes complete. |
| (colorChange) | EventEmitter<ColorChange> | - | Event emitted when the color changes. |
| (colorChangeComplete) | EventEmitter<ColorChange> | - | Event emitted when the color changes complete. |
CSS Variables
--cp-container-width
--cp-container-shape
--cp-container-padding
--cp-container-margin
--cp-container-elevation-shadow
--cp-container-background-color
--cp-container-text-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-saturation-picker-shape
--cp-saturation-picker-thumb-size
--cp-saturation-picker-thumb-shape
--cp-saturation-picker-thumb-shadow
--cp-saturation-picker-thumb-outline-color
--cp-saturation-picker-thumb-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
--cp-slider-thumb-outline-color
--cp-slider-thumb-focus-outline-color
License
MIT