NgxCheckboxLib

A lightweight plugin to display a modern checkbox.

Features

• highly customizable
• very easy to implement

Demo

• Link

Get started

Installation

$ npm i ngx-i24-checkbox

Example

TS

Module

import { NgxCheckboxModule } from 'ngx-i24-checkbox';
@NgModule({
  declarations: [ AppComponent ],
  imports: [BrowserModule, NgxCheckboxModule ],
  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 { 
}

HTML

  <ngx-checkbox></ngx-checkbox>

  <!-- Or you can simply use directive -->
  <!-- Note: type should be `checkbox`  -->
  <input NgxCheckbox type="checkbox" />

Options

| Property (Type) | Default | Description| | - | - | - | | color | '#3c3c3c' | The color of check | | backColor| '#fff' | The background of checkbox | | borderColor| '#c6c6c6' | The border color | | shadow| '0px 0px 4px 1px #6c6c6c' | The shadow of the checkbox | | cWidth| '20px' | The width of the checkbox | | cHeight| '20px' | The height of the checkbox | | checkWidth| '6px' | The width of the checkbox signal | | checkHeight| '10px' | The height of the checkbox signal | | value | true | The default value |

Events

• checkedChanged - triggered on change the value

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