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