search

scttcper / ngx-color

🎨 Color Pickers from Sketch, Photoshop, Chrome, Github, Twitter & more
https://ngx-color.vercel.app
MIT License
436 stars 55 forks source link
angular color-picker typescript

readme

Angular color sketch preview

Angular Color


npm codecov



DEMO: https://ngx-color.vercel.app

About

Getting Started

Dependencies

Latest version available for each version of Angular

ngx-color Angular
4.1.1 8.x
5.1.4 9.x
6.2.0 10.x 11.x
7.3.3 12.x 13.x
8.0.3 14.x 15.x
current >= 16.x

Install

npm install ngx-color --save

Include Component

import
import { ColorSketchModule } from 'ngx-color/sketch';

@NgModule({
  imports: [
    ColorSketchModule, // added to imports
  ],
})
class YourModule {}
use
<color-sketch [color]="state" (onChangeComplete)="changeComplete($event)"></color-sketch>

Others available

import { ColorAlphaModule } from 'ngx-color/alpha'; // <color-alpha-picker></color-alpha-picker>
import { ColorBlockModule } from 'ngx-color/block'; // <color-block></color-block>
import { ColorChromeModule } from 'ngx-color/chrome'; // <color-chrome></color-chrome>
import { ColorCircleModule } from 'ngx-color/circle'; // <color-circle></color-circle>
import { ColorCompactModule } from 'ngx-color/compact'; // <color-compact></color-compact>
import { ColorGithubModule } from 'ngx-color/github'; // <color-github></color-github>
import { ColorHueModule } from 'ngx-color/hue'; // <color-hue-picker></color-hue-picker>
import { ColorMaterialModule } from 'ngx-color/material'; // <color-material></color-material>
import { ColorPhotoshopModule } from 'ngx-color/photoshop'; // <color-photoshop></color-photoshop>
import { ColorSketchModule } from 'ngx-color/sketch'; // <color-sketch></color-sketch>
import { ColorSliderModule } from 'ngx-color/slider'; // <color-slider></color-slider>
import { ColorSwatchesModule } from 'ngx-color/swatches'; // <color-swatches></color-swatches>
import { ColorTwitterModule } from 'ngx-color/twitter'; // <color-twitter></color-twitter>
import { ColorShadeModule } from 'ngx-color/shade'; // <color-shade-picker></color-shade-picker>

Component API

Color

Color controls what color is active on the color picker. You can use this to initialize the color picker with a particular color, or to keep it in sync with the state of a parent component.

Color accepts either a string of a hex color '#333' or a object of rgb or hsl values { r: 51, g: 51, b: 51 } or { h: 0, s: 0, l: .10 }. Both rgb and hsl will also take a a: 1 value for alpha. You can also use transparent.

<color-sketch color="#fff" (onChangeComplete)="handleChangeComplete($event)"></color-sketch>

In this case, the color picker will initialize with the color #fff. When the color is changed, handleChangeComplete will fire and set the new color to state.

onChange

Pass a function to call every time the color is changed. Use this to store the color in the state of a parent component or to make other transformations.

Keep in mind this is called on drag events that can happen quite frequently. If you just need to get the color once use onChangeComplete.

import { Component } from '@angular/core';
import { ColorEvent } from 'ngx-color';

@Component({
  selector: 'selector-name',
  template: ` <color-sketch (onChange)="handleChange($event)"></color-sketch> `,
})
export class NameComponent {
  constructor() {}

  handleChange($event: ColorEvent) {
    console.log($event.color);
    // color = {
    //   hex: '#333',
    //   rgb: {
    //     r: 51,
    //     g: 51,
    //     b: 51,
    //     a: 1,
    //   },
    //   hsl: {
    //     h: 0,
    //     s: 0,
    //     l: .20,
    //     a: 1,
    //   },
    // }
  }
}

onChangeComplete

Pass a function to call once a color change is complete.

Individual APIs

Some pickers have specific APIs that are unique to themselves:

Alpha

Block

Chrome

Circle

Compact

Github

Hue

Material

None

Photoshop

Sketch

Slider

Swatches

Twitter

Shade

GitHub @scttcper  ·  Twitter @scttcper