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
- 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
<ui-toggle class="toggle-success"></ui-toggle>
<ui-toggle class="toggle-primary"></ui-toggle>
<ui-toggle class="toggle-info"></ui-toggle>
<ui-toggle class="toggle-warning"></ui-toggle>
<ui-toggle class="toggle-danger"></ui-toggle>
Toggle sizes
<ui-toggle class="toggle-xs"></ui-toggle>
<ui-toggle class="toggle-sm"></ui-toggle>
<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 |