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 |