0.0.4 • Published 2 years ago
ngx-i24-checkbox v0.0.4
NgxCheckboxLib
A lightweight plugin to display a modern checkbox.
Features
- highly customizable
- very easy to implement
Demo
Get started
Installation
$ npm i ngx-i24-checkboxExample
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