ngx-toggle-switch

switch button for angular4

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
ngx-toggle-switch
2.0.56 years ago7 years agoMinified + gzip package size for ngx-toggle-switch in KB

Readme

Disclaimer
This switch is derived from webcat12345/ngx-ui-switch, which was itself derived from yuyang041060120/angular2-ui-switch, which is a dead repo. This is temporarily published so it can be properly npm installed but I will deprecate and redirect this package once the appropriate fixes & changes have been back PR'd into the common repo. Thanks guys for your amazingly hard work.
Ngx UI Switch Component
Greenkeeper badge Gitter Build Status npm version npm All Contributors Throughput Graph

Description

This is a simple iOS 7 style switch component for Angular4.
Live demo
alt
Inspired by switchery - in angular4.

Installation

Angular v4

Angular v5 uses a different metadata version for decorators, therefore, the Angular v4 compatible versions of this library are 1.4.4 and below. However, versions < 1.6.0 have been deprecated to avoid the confusion brought up in issue #219
The code in the 1.x-stable branch contains the Angular v4 code.
Note: The Angular v4 branch will only receive bug fixes.
npm install ngx-ui-switch@^1.6.0 --save
# yarn add ngx-ui-switch@^1.6.0

Beyond Angular v4

The master branch will contain the latest code for the latest version of Angular. When upgrading this library to a new version of Angular, a new x.y-stable branch will be created to allow bugfixes. Below is how to install the latest version of the library.
npm install ngx-toggle-switch --save
# yarn add ngx-toggle-switch

Usage

import { UiSwitchModule } from 'ngx-toggle-switch';
import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule, UiSwitchModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {
}

<ui-switch></ui-switch>

Note that if you are using the switch in a submodule, such as a lazy loaded module, then you must also import the module in that module itself. Otherwise you will get the error that it is an unknown component as seen in issue #227.
Two way binding
<ui-switch [(ngModel)]="enable"></ui-switch>
Params

checked

type: boolean

default: false

<ui-switch checked></ui-switch>
<ui-switch [checked]="false"></ui-switch>

disabled

type: boolean

default: false

<ui-switch disabled></ui-switch>
<ui-switch checked [disabled]="true"></ui-switch>

change

type: event

default: noop

<ui-switch (change)="onChange($event)"></ui-switch>

size

type: string

default: medium

<ui-switch size="small"></ui-switch>
<ui-switch size="large"></ui-switch>

reverse

type: boolean

default: false

<ui-switch reverse></ui-switch>

color

type: string

default: rgb(100, 189, 99)

<ui-switch color="red"></ui-switch>

switchColor

type: string

default: #fff

<ui-switch switchColor="#fcfcfc"></ui-switch>

defaultBgColor

Default background color
type: string

default: #fff

<ui-switch defaultBgColor="red"></ui-switch>

defaultBoColor

Default border color
type: string

default: #dfdfdf

<ui-switch defaultBoColor="black"></ui-switch>

Development

Setup

yarn install

Demo

Edit files in src/app to add to the demo or try changes to the library.

Build library

First, edit version in package.json and src/lib/package.json to publish a new version to npmjs.org
# Build the library into dist/{es5,es2015}
yarn build
# Publish to npm
yarn release

Contributors

Thanks goes to these wonderful people (emoji key):
|
webcatblack

💻 🎨 💡 🤔 👀 |
Chris McKnight

💬 💻 📖 🤔 🚇") 🔌 👀 🔧 | | :---: | :---: |
This project follows the all-contributors specification. Contributions of any kind welcome!

FAQ

Toggle text

<ui-switch labelOn="Yes" labelOff="No"></ui-switch>
License
MIT