# angular-ui-toggle

> An Apple iOS inspired toggle switch input control for [Angular 1](https://angularjs.org/) applications. This angular directive is extremely lightweight, not requiring a ton of dependencies (only Angular). Options to easily adjust the styling are provided

Latest version **0.0.4** (published 2017-01-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install angular-ui-toggle
pnpm add angular-ui-toggle
yarn add angular-ui-toggle
bun add angular-ui-toggle
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2017-01-19 |
| First published | 2017-01-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 (+10 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Adam Gian |
| Maintainers | 1watt |

## Links

- npm: https://www.npmjs.com/package/angular-ui-toggle
- Repository: https://github.com/adamgian/angular-ui-toggle
- Homepage: https://github.com/adamgian/angular-ui-toggle#readme
- Issues: https://github.com/adamgian/angular-ui-toggle/issues
- npm.io page: https://npm.io/package/angular-ui-toggle

## Dependencies (1)

- [angular](https://npm.io/package/angular.md) ^1.5.3

## Recent versions

- 0.0.4 (latest) — 2017-01-19
- 0.0.3 — 2017-01-13
- 0.0.2 — 2017-01-13
- 0.0.1 — 2017-01-13

## README

# angular-ui-toggle

An Apple iOS inspired toggle switch input control for [Angular 1](https://angularjs.org/) applications. This angular directive is extremely lightweight, not requiring a ton of dependencies (only Angular). Options to easily adjust the styling are provided via Bootstrap-like classes.

![iOS 7/8 Toggle switch](https://cloud.githubusercontent.com/assets/8142632/21925053/6f450396-d9c7-11e6-850a-73ca3b50bc42.gif)

*A recreation of the toggle switch in iOS 7/8. Source: [Dribble](https://dribbble.com/shots/1109255--GIF-iOS-7-switch-3)*




## Install

1. Download package directly from [Github](https://github.com/adamgian/angular-ui-toggle/archive/master.zip), unzip and place the files that are in `dist` (`angular-ui-toggle-min.js` and `angular-ui-toggle-min.css`) somewhere in your project directory.
Alternatively, package is also available on [NPM](https://www.npmjs.com/package/angular-ui-toggle): `npm install angular-ui-toggle`.

2. Add a reference to the script and stylesheet in your HTML.
```html
<link href="/yourDirectory/angular-ui-toggle-min.css" rel="stylesheet">
```

```html
<script src="/yourDirectory/angular-ui-toggle-min.js"></script>
```

3. Include module (`uiToggle`) in your Angular application.
```js
var app = angular.module('app', [
    'uiToggle',
    ...
]);
```

4. angular-ui-toggle is now available for use – see usage section below for examples.




## Usage

Absolute bare minimum for a functioning toggle switch:
```html
<ui-toggle ng-model="isEnabled"></ui-toggle>
```

Optional attributes:
```html
class=""
disabled
id=""
name=""
```


### Toggle switch styles

```html
<!-- Success (green) -->
<ui-toggle class="toggle-success"></ui-toggle>

<!-- Primary (deep blue) -->
<ui-toggle class="toggle-primary"></ui-toggle>

<!-- Info (light blue) -->
<ui-toggle class="toggle-info"></ui-toggle>

<!-- Warning (orange) -->
<ui-toggle class="toggle-warning"></ui-toggle>

<!-- Danger (red) -->
<ui-toggle class="toggle-danger"></ui-toggle>
```


### Toggle switch sizes

```html
<!-- Extra small -->
<ui-toggle class="toggle-xs"></ui-toggle>

<!-- Small -->
<ui-toggle class="toggle-sm"></ui-toggle>

<!-- Large -->
<ui-toggle class="toggle-lg"></ui-toggle>
```

---
_Source: https://npm.io/package/angular-ui-toggle · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._