JarCastingAngular-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
- Grab the NPM
npm install --save @momsfriendlydevco/angular-ui-toggle
- 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"/>
- Include the module in your main
angular.module()call:
var app = angular.module('app', ['uiToggle'])
- 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 |