angular-ui-toggle

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: Dribble

Install

1. Download package directly from Github, 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: npm install angular-ui-toggle.

2. Add a reference to the script and stylesheet in your HTML.

<link href="/yourDirectory/angular-ui-toggle-min.css" rel="stylesheet">

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

1. Include module (uiToggle) in your Angular application.

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

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

Usage

Absolute bare minimum for a functioning toggle switch:

<ui-toggle ng-model="isEnabled"></ui-toggle>

Optional attributes:

class=""
disabled
id=""
name=""

Toggle switch 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 switch 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>