Angular-UI-Toggle

An Apple iOS inspired toggle switch input control for Angular 1 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.

A recreation of the toggle switch in iOS 7/8. Source: angular-ui-toggle screenshot

Installation

1. Grab the NPM

npm install --save @momsfriendlydevco/angular-ui-toggle

2. Install the required script + CSS somewhere in your build chain or include it in a HTML header:

<script src="/libs/angular-ui-toggle/dist/angular-ui-toggle.min.js"/>
<link href="/libs/angular-ui-toggle/dist/angular-ui-toggle.min.css" rel="stylesheet" type="text/css"/>

3. Include the module in your main angular.module() call:

var app = angular.module('app', ['uiToggle'])

4. Use somewhere in your template:

<ui-toggle ng-model="$ctrl.something"></ui-toggle>

A demo is also available. To use this follow the instructions in the demo directory.

API

Toggle styles

<!-- 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 sizes

<!-- 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>

Directive Properties

Property	Type	Default	Description
ngModel	boolean		Model to bind to
class	string	""	Optional class style to apply
disabled	boolean	false	Whether to disable the toggle
ngDisabled	boolean	false	Alternate binding for disabled
ngChange	function		Function to call as ({value}) on value change