This is a simple iOS 7 style switch component for Angular4.
Live demo
Inspired by switchery - in angular4.
npm install ngx-ui-switch --save
import { UiSwitchModule } from 'ngx-ui-switch';
import { AppComponent } from './app.component';
@NgModule({
imports: [BrowserModule, FormsModule, UiSwitchModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {
}
<ui-switch></ui-switch>
<ui-switch [(ngModel)]="enable"></ui-switch>
type: boolean
default: false
<ui-switch checked></ui-switch>
<ui-switch [checked]="false"></ui-switch>
type: boolean
default: false
<ui-switch disabled></ui-switch>
<ui-switch checked [disabled]="true"></ui-switch>
type: event
default: noop
<ui-switch (change)="onChange($event)"></ui-switch>
type: string
default: medium
<ui-switch size="small"></ui-switch>
<ui-switch size="large"></ui-switch>
type: boolean
default: false
<ui-switch reverse></ui-switch>
type: string
default: rgb(100, 189, 99)
<ui-switch color="red"></ui-switch>
type: string
default: #fff
<ui-switch switchColor="#fcfcfc"></ui-switch>
Default background color
type: string
default: #fff
<ui-switch defaultBgColor="red"></ui-switch>
Default border color
type: string
default: #dfdfdf
<ui-switch defaultBoColor="black"></ui-switch>
yarn install
Edit files in src/app
to add to the demo or try changes to the 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 run publish
Thanks goes to these wonderful people (emoji key):
webcat_black 💻 🎨 💡 🤔 👀 |
Chris McKnight 💬 💻 📖 🤔 🚇 🔌 👀 🔧 |
---|
This project follows the all-contributors specification. Contributions of any kind welcome!
MIT