https://github.com/OuterlimitsTech/olt-ngx-ui-switch
Angular UI Switch (Forked)
https://github.com/OuterlimitsTech/olt-ngx-ui-switch
Last synced: 4 months ago
JSON representation
Angular UI Switch (Forked)
- Host: GitHub
- URL: https://github.com/OuterlimitsTech/olt-ngx-ui-switch
- Owner: OuterlimitsTech
- License: mit
- Created: 2022-08-23T22:39:07.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-09-08T22:00:57.000Z (8 months ago)
- Last Synced: 2024-09-18T02:31:16.469Z (7 months ago)
- Language: TypeScript
- Size: 1.03 MB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- trackawesomelist - olt-ngx-ui-switch (⭐1) - NGX UI Switch (Forked) to latest version of Angular. (Recently Updated / [Sep 16, 2024](/content/2024/09/16/README.md))
- awesome-angular - olt-ngx-ui-switch - NGX UI Switch (Forked) to latest version of Angular. (Table of contents / Third Party Components)
- fucking-awesome-angular - olt-ngx-ui-switch - NGX UI Switch (Forked) to latest version of Angular. (Table of contents / Third Party Components)
- fucking-awesome-angular - olt-ngx-ui-switch - NGX UI Switch (Forked) to latest version of Angular. (Table of contents / Third Party Components)
README
## This library was copied from [https://github.com/webcat12345/ngx-ui-switch](https://github.com/webcat12345/ngx-ui-switch)
We use this library, and it seems that it takes several months for the owners to update after a major version Angular update.
# Angular UI Switch Component
## Description
This is a simple iOS 7 style switch component for [Angular](https://angular.io).
Live [demo](https://webcat12345.github.io/ngx-ui-switch/demo/)
A [stackblitz](https://stackblitz.com) is also available [here](https://stackblitz.com/edit/ngx-ui-switch)
Inspired by [switchery](https://github.com/abpetkov/switchery) in [Angular](https://angular.io).
## Installation
npm: `npm install olt-ngx-ui-switch`
yarn: `yarn add olt-ngx-ui-switch`
## Usage
- Import into a module (`AppModule` example below)
```typescript
// app.module.ts
import { OltUiSwitchModule } from "olt-ngx-ui-switch";
import { AppComponent } from "./app.component";
@NgModule({
imports: [BrowserModule, OltUiSwitchModule],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
```
- Add default css file to appropriate project(s) `angular.json`
```json
"styles": [
"src/styles.css",
"./node_modules/olt-ngx-ui-switch/ui-switch.component.css"
]
```
Alternatively, the scss version can be imported into a scss file:
```scss
@import "~olt-ngx-ui-switch/ui-switch.component.scss";
```
## Global config
Use when you want to change default values globally.
These settings will override anything passed in via property bindings.
```javascript
import { OltUiSwitchModule } from "olt-ngx-ui-switch";
import { AppComponent } from "./app.component";
@NgModule({
imports: [
BrowserModule,
OltUiSwitchModule.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
```
# Two way binding
```html
```
# Params
### checked
> type: _boolean_
> default: false
```html
```
### disabled
> type: _boolean_
> default: false
```html
```
### loading
_Show a loading state for the toggle button when true. Often utilized with beforeChange._
> type: _boolean_
> default: false
```html
```
### change
> type: _boolean_
> default: noop
```html
```
### changeEvent
> type: _MouseEvent_
> default: noop
```html
```
### valueChange
> type: _boolean_
> default: noop
```html
```
### beforeChange
Utilize an observable to check that the toggle event should complete
> type: _Observable\_
> default: noop
```html
```
```typescript
OnBeforeChange: Observable = new Observable((observer) => {
const timeout = setTimeout(() => {
observer.next(true);
}, 2000);
return () => clearTimeout(timeout);
});
```
### size
> type: _string_
> default: medium
```html
```
### reverse
> type: _boolean_
> default: false
```html
```
### color
> type: _string_
> default: rgb(100, 189, 99)
```html
```
### switchColor
> type: _string_
> default: #fff
```html
```
### defaultBgColor
Default background color
> type: _string_
> default: #fff
```html
```
### defaultBoColor
_Default border color_
> type: _string_
> default: #dfdfdf
```html
```
### checkedLabel
_Checked label (on)_
> type: _string_
> default: null
```html
```
### uncheckedLabel
_Unchecked label (off)_
> type: _string_
> default: null
```html
```
### checkedTextColor
checked text color of the label (on)
> type: _string_
> default: black
```html
```
### uncheckedTextColor
Unchecked text color of the label (off)
> type: _string_
> default: black
```html
```
## Switch Content
```html
![]()
```