ngx-ui-switch - GitLite

KO | EN

gitlite — search

#javascript #ai #typescript #android #deep-learning #linux #docker #nodejs #java #windows #pytorch #security #openai #open-source

ngx-ui-switch

(★ 112)

Angular UI Switch component

파일 탐색기

최종 버전 다운로드 (.zip)

- - ci.yml
  - deploy-github-pages.yml
  - integration-tests.yml
  - lint.yml
  - unit-tests.yml
- - app.cy.ts
- - example.json
- - commands.ts
  - component-index.html
  - component.ts
  - e2e.ts
- tsconfig.json
- app.e2e-spec.ts
- tsconfig.e2e.json
- publish.sh
- - app.component.html
  - app.component.spec.ts
  - app.component.ts
  - app.module.ts
- - .gitkeep
- - environment.prod.ts
  - environment.ts
- - ng-package.json
  - package.json
  - public_api.ts
  - tsconfig-build.json
  - tsconfig-esm.json
- favicon.ico
- index.html
- main.ts
- polyfills.ts
- styles.scss
- test.ts
- tsconfig.app.json
- tsconfig.spec.json
- typings.d.ts
.all-contributorsrc
.codecov.yml
.editorconfig
.eslintrc.json
.gitignore
.nojekyll
.npmignore
.nvmrc
angular.json
browserslist
build.ts
cypress.config.ts
docs.ts
karma.conf.js
LICENSE
logo.png
package.json
README.md
renovate.json
tsconfig.build.json
tsconfig.json
typedoc.json
yarn.lock

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/webcat12345/ngx-ui-switch

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd ngx-ui-switch

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

yarn install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

yarn build

배포용으로 코드를 최적화해서 빌드 파일을 생성합니다.

yarn release

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Angular UI Switch Component

[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ngx-discuss/Lobby)
[![Build Status](https://github.com/webcat12345/ngx-ui-switch/actions/workflows/ci.yml/badge.svg?branch=master)](https://github.com/webcat12345/ngx-ui-switch/actions/workflows/ci.yml)
[![GitHub Pages](https://img.shields.io/badge/Demo-blue?logo=angular&label=Pages&color=7952B3)](https://webcat12345.github.io/ngx-ui-switch/demo/)
[![license](https://img.shields.io/github/license/webcat12345/ngx-ui-switch)](https://github.com/webcat12345/ngx-ui-switch/blob/master/LICENSE)
[![npm version](https://img.shields.io/npm/v/ngx-ui-switch)](https://badge.fury.io/js/ngx-ui-switch)
[![npm](https://img.shields.io/npm/dm/ngx-ui-switch)](https://www.npmjs.com/package/ngx-ui-switch)

[![All Contributors](https://img.shields.io/badge/all_contributors-12-orange.svg)](https://raw.githubusercontent.com/webcat12345/ngx-ui-switch/master/)

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/ngx-ui-switch)

## Description

This is a simple iOS 7 style switch component for [Angular](https://angular.io).

![alt](https://raw.githubusercontent.com/webcat12345/ngx-ui-switch/master/logo.png)

Inspired by [switchery](https://github.com/abpetkov/switchery) in [Angular](https://angular.io).

## Installation

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](https://github.com/webcat12345/ngx-ui-switch/issues/309) [#343](https://github.com/webcat12345/ngx-ui-switch/issues/343)
- Global options
- beforeChange event [#314](https://github.com/webcat12345/ngx-ui-switch/issues/314) [#359](https://github.com/webcat12345/ngx-ui-switch/pull/359)

## Usage

- 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';
```

## Global config

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
<ui-switch></ui-switch>
```

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](https://github.com/webcat12345/ngx-ui-switch/issues/227).

# Two way binding

```html
<ui-switch [(ngModel)]="enable"></ui-switch>
```

# Params

### checked

> type: *boolean*

> default: false

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

### disabled

> type: *boolean*

> default: false

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

### loading

*Show a loading state for the toggle button when true. Often utilized with beforeChange.*

> type: *boolean*

> default: false

```html
<ui-switch [loading]="isLoading">
  <i class="fa fa-spinner fa-pulse" *ngIf="isLoading"></i>
</ui-switch>
```

### change

> type: *boolean*

> default: noop

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

### changeEvent

> type: *MouseEvent*

> default: noop

```html
<ui-switch (changeEvent)="onChangeEvent($event)"></ui-switch>
<ui-switch (changeEvent)="$event.stopPropagation()"></ui-switch>
```

### valueChange

> type: *boolean*

> default: noop

```html
<ui-switch (valueChange)="onValueChange($event)"></ui-switch>
```

### beforeChange

Utilize an observable to check that the toggle event should complete

> type: *Observable\<boolean\>*

> default: noop

```html
<ui-switch [beforeChange]="OnBeforeChange">
</ui-switch>
```

```typescript
OnBeforeChange: Observable<boolean> = new Observable((observer) => {
  const timeout = setTimeout(() => {
    observer.next(true);
  }, 2000);
  return () => clearTimeout(timeout);
});
```

### size

> type: *string*

> default: medium

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

### reverse

> type: *boolean*

> default: false

```html
<ui-switch reverse></ui-switch>
```

### color

> type: *string*

> default: rgb(100, 189, 99)

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

### switchColor

> type: *string*

> default: #fff

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

### defaultBgColor

Default background color

> type: *string*

> default: #fff

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

### defaultBoColor

*Default border color*

> type: *string*

> default: #dfdfdf

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

### checkedLabel

*Checked label (on)*

> type: *string*

> default: null

```html
<ui-switch checkedLabel="on"></ui-switch>
```

### uncheckedLabel

*Unchecked label (off)*

> type: *string*

> default: null

```html
<ui-switch uncheckedLabel="off"></ui-switch>
```

### checkedTextColor

checked text color of the label (on)

> type: *string*

> default: black

```html
<ui-switch checkedTextColor="#7CFC00"></ui-switch>
```

### uncheckedTextColor

Unchecked text color of the label (off)

> type: *string*

> default: black

```html
<ui-switch uncheckedTextColor="red"></ui-switch>
```

## Switch Content

```html
<ui-switch uncheckedLabel="off">
  <img src=""/>
</ui-switch>
```

## Aria Label

```html
<ui-switch [ariaLabel]="'labelName'"></ui-switch>
```

## Development

### Setup

```sh
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*

```sh
# Build the library into dist/{es5,es2015}
yarn build
# Publish to npm
yarn release
```

## Contributors

Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

| [<img src="https://avatars3.githubusercontent.com/u/19761422?v=4" width="100px;" alt="webcat_black"/><br /><sub><b>webcat_black</b></sub>](https://webcat12345.github.io/)<br />[💻](https://github.com/webcat12345/ngx-ui-switch/commits?author=webcat12345 "Code") [🎨](#design-webcat12345 "Design") [💡](#example-webcat12345 "Examples") [🤔](#ideas-webcat12345 "Ideas, Planning, & Feedback") [👀](#review-webcat12345 "Reviewed Pull Requests") | [<img src="https://avatars0.githubusercontent.com/u/735717?v=4" width="100px;" alt="Chris McKnight"/><br /><sub><b>Chris McKnight</b></sub>](https://github.com/cmckni3)<br />[💬](#question-cmckni3 "Answering Questions") [💻](https://github.com/webcat12345/ngx-ui-switch/commits?author=cmckni3 "Code") [📖](https://github.com/webcat12345/ngx-ui-switch/commits?author=cmckni3 "Documentation") [🤔](#ideas-cmckni3 "Ideas, Planning, & Feedback") [🚇](#infra-cmckni3 "Infrastructure (Hosting, Build-Tools, etc)") [🔌](#plugin-cmckni3 "Plugin/utility libraries") [👀](#review-cmckni3 "Reviewed Pull Requests") [🔧](#tool-cmckni3 "Tools") | [<img src="https://avatars0.githubusercontent.com/u/302721?v=4" width="100px;" alt="Jakub"/><br /><sub><b>Jakub</b></sub>](https://github.com/kubiq)<br />[💻](https://github.com/webcat12345/ngx-ui-switch/commits?author=kubiq "Code") [📖](https://github.com/webcat12345/ngx-ui-switch/commits?author=kubiq "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/915077?v=4" width="100px;" alt="Serhii Kovalenko"/><br /><sub><b>Serhii Kovalenko</b></sub>](https://github.com/cmajsmith)<br />[💻](https://github.com/webcat12345/ngx-ui-switch/commits?author=cmajsmith "Code") [💡](#example-cmajsmith "Examples") [📦](#platform-cmajsmith "Packaging/porting to new platform") | [<img src="https://avatars1.githubusercontent.com/u/1156100?v=4" width="100px;" alt="Richard McSharry"/><br /><sub><b>Richard McSharry</b></sub>](https://github.com/rmcsharry)<br />[📖](https://github.com/webcat12345/ngx-ui-switch/commits?author=rmcsharry "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/507874?v=4" width="100px;" alt="bitsprint"/><br /><sub><b>bitsprint</b></sub>](https://github.com/bitsprint)<br />[🚇](#infra-bitsprint "Infrastructure (Hosting, Build-Tools, etc)") [📦](#platform-bitsprint "Packaging/porting to new platform") [🔧](#tool-bitsprint "Tools") | [<img src="https://avatars0.githubusercontent.com/u/11628507?v=4" width="100px;" alt="Gianluca Paronitti"/><br /><sub><b>Gianluca Paronitti</b></sub>](http://www.gamepix.com)<br />[💻](https://github.com/webcat12345/ngx-ui-switch/commits?author=gparonitti "Code") |
| :---: | :---: | :---: | :---: | :---: | :---: | :---: |
| [<img src="https://avatars1.githubusercontent.com/u/5429780?v=4" width="100px;" alt="Milos Bejda"/><br /><sub><b>Milos Bejda</b></sub>](http://mbejda.com)<br />[💻](https://github.com/webcat12345/ngx-ui-switch/commits?author=mbejda "Code") [📖](https://github.com/webcat12345/ngx-ui-switch/commits?author=mbejda "Documentation") [💡](#example-mbejda "Examples") | [<img src="https://avatars1.githubusercontent.com/u/590274?v=4" width="100px;" alt="kameelyan"/><br /><sub><b>kameelyan</b></sub>](https://github.com/kameelyan)<br />[💻](https://github.com/webcat12345/ngx-ui-switch/commits?author=kameelyan "Code") [📖](https://github.com/webcat12345/ngx-ui-switch/commits?author=kameelyan "Documentation") [💡](#example-kameelyan "Examples") | [<img src="https://avatars0.githubusercontent.com/u/20248805?v=4" width="100px;" alt="Grégory Alary"/><br /><sub><b>Grégory Alary</b></sub>](https://gregoryalary.github.io/)<br />[💬](#question-gregoryalary "Answering Questions") [🐛](https://github.com/webcat12345/ngx-ui-switch/issues?q=author%3Agregoryalary "Bug reports") [💻](https://github.com/webcat12345/ngx-ui-switch/commits?author=gregoryalary "Code") [🎨](#design-gregoryalary "Design") | [<img src="https://avatars2.githubusercontent.com/u/2574403?v=4" width="100px;" alt="zehtravassos"/><br /><sub><b>zehtravassos</b></sub>](https://github.com/zehtravassos)<br />[💻](https://github.com/webcat12345/ngx-ui-switch/commits?author=zehtravassos "Code") [🎨](#design-zehtravassos "Design") | [<img src="https://avatars0.githubusercontent.com/u/18656830?v=4" width="100px;" alt="H. Rüger"/><br /><sub><b>H. Rüger</b></sub>](https://github.com/hrueger)<br />[🐛](https://github.com/webcat12345/ngx-ui-switch/issues?q=author%3Ahrueger "Bug reports") [💻](https://github.com/webcat12345/ngx-ui-switch/commits?author=hrueger "Code") [🚧](#maintenance-hrueger "Maintenance") |

This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!