switch button for angular4
npm install ngx-ui-switch







This is a simple iOS 7 style switch component for Angular.
!alt
Inspired by switchery in Angular.
npm: npm install ngx-ui-switch --save
yarn: yarn add ngx-ui-switch
Some features are not available in previous versions:
- CSS styling
- Switch content (checkedLabel, uncheckedLabel) #309 #343
- Global options
- beforeChange event #314 #359
- Import into a module (AppModule example below)
``javascript
// app.module.ts
import { UiSwitchModule } from 'ngx-ui-switch';
import { AppComponent } from './app.component';
@NgModule({
imports: [BrowserModule, UiSwitchModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
`
- Add default css file to appropriate project(s) angular.json
`json`
"styles": [
"src/styles.css",
"./node_modules/ngx-ui-switch/ui-switch.component.css"
]
Alternatively, the scss version can be imported into a scss file:
`scss`
@import '~ngx-ui-switch/ui-switch.component.scss';
Use when you want to change default values globally.
These settings will override anything passed in via property bindings.
`javascript
import { UiSwitchModule } from 'ngx-ui-switch';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
UiSwitchModule.forRoot({
size: 'small',
color: 'rgb(0, 189, 99)',
switchColor: '#80FFA2',
defaultBgColor: '#00ACFF',
defaultBoColor : '#476EFF',
checkedLabel: 'on',
uncheckedLabel: 'off'
})
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
`
`html`
Note that if you are using the switch in a child NgModule, such as a lazy loaded module, then you must also import the module in the module itself or within a shared module. Otherwise you will get the error that it is an unknown component as seen in issue #227.
`html`
> type: boolean
> default: false
`html`
> type: boolean
> default: false
`html`
Show a loading state for the toggle button when true. Often utilized with beforeChange.
> type: boolean
> default: false
`html`
> type: boolean
> default: noop
`html`
> type: MouseEvent
> default: noop
`html`
> type: boolean
> default: noop
`html`
Utilize an observable to check that the toggle event should complete
> type: Observable\
> default: noop
`html`
`typescript`
OnBeforeChange: Observable
const timeout = setTimeout(() => {
observer.next(true);
}, 2000);
return () => clearTimeout(timeout);
});
> type: string
> default: medium
`html`
> type: boolean
> default: false
`html`
> type: string
> default: rgb(100, 189, 99)
`html`
> type: string
> default: #fff
`html`
Default background color
> type: string
> default: #fff
`html`
Default border color
> type: string
> default: #dfdfdf
`html`
Checked label (on)
> type: string
> default: null
`html`
Unchecked label (off)
> type: string
> default: null
`html`
checked text color of the label (on)
> type: string
> default: black
`html`
Unchecked text color of the label (off)
> type: string
> default: black
`html`
`html`
`html`
`sh`
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
`sh``Build the library into dist/{es5,es2015}
yarn buildPublish to npm
yarn release
Thanks goes to these wonderful people (emoji key):
|
webcat_black
π» π¨ π‘ π€ π |
Chris McKnight
π¬ π» π π€ π") π π π§ |
Jakub
π» π |
Serhii Kovalenko
π» π‘ π¦ |
Richard McSharry
π |
bitsprint
π") π¦ π§ |
Gianluca Paronitti
π» |
| :---: | :---: | :---: | :---: | :---: | :---: | :---: |
|
Milos Bejda
π» π π‘ |
kameelyan
π» π π‘ |
GrΓ©gory Alary
π¬ π π» π¨ |
zehtravassos
π» π¨ |
H. RΓΌger
π π» π§ |
This project follows the all-contributors specification. Contributions of any kind welcome!