NgxI24ColorPickerLib

A lightweight plugin to pick a color.

Features

• highly customizable
• very easy to implement

Demo

• Link

Get started

Installation

$ npm i ngx-i24-color-picker

Example

TS

Module

import { NgxI24ColorPickerModule } from "ngx-i24-color-picker";
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgxI24ColorPickerModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

Component

import { Component } from "@angular/core";
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {
  o1 = {
    boxBg: "#303030",
    showBox: true,
  };
}

HTML

<ngx-i24-color-picker
  [boxBg]="o1.boxBg"
  [showBox]="o1.showBox"
></ngx-i24-color-picker>

Options

Property	Default	Description
ds	[ '#f44336', '#e91e63', '#9c27b0', ...]	The list of colors
position	'right'	The position of selection box ('right', 'left')
value	'#2196f3'	The initial value of the preview box
previewWidth	'20px'	The width of the preview box
previewHeight	'20px'	The height of the preview box
previewBorderRadius	'3px'	The border radios of the preview box
boxGap	'10px'	The distance between the colors items
boxWidth	'164'	The width of the colors box
boxBg	'#fafafa'	The background color of the colors box
boxPadding	'10px'	The padding of the colors box
boxBorderRadius	'4px'	The border radios of the colors box
arrowWidth	'6px'	The width of the arrow
itemWidth	'12px'	The width of the color item
itemHeight	'12px'	The height of the color item
itemBorderRadius	'3px'	The border radios of the color item
showBox	false	The initial value of the colors box

Events

• selectedChanged - triggered on change the selection

Other Projects

Name	Link	Description
ngx-i24-circular-progress	Link	A lightweight plugin to render a simple, animated circular progress bar.
ngx-i24-progress-bar	Link	A lightweight plugin to render a simple, animated progress bar.
ngx-weekday-picker	Link	Lightweight plugin to a pick weekday.
ngx-i24-color-picker	Link	A lightweight plugin to pick a color.
ngx-i24-checkbox	Link	A lightweight plugin to display a modern checkbox.

Support

Copyright

Copyright (c) 2022 Yaseen Alrefaee, contributors. Released under the MIT