@momsfriendlydevco/angular-ui-toggle

1.0.4 • Public • Published

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.

iOS 7/8 Toggle switch

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
  1. 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"/>
  1. Include the module in your main angular.module() call:
var app = angular.module('app', ['uiToggle'])
  1. 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

Readme

Keywords

none

Package Sidebar

Install

npm i @momsfriendlydevco/angular-ui-toggle

Weekly Downloads

1

Version

1.0.4

License

MIT

Unpacked Size

30.5 kB

Total Files

15

Last publish

Collaborators

  • mr-yellow
  • melromero
  • hash-bang
  • 1watt
  • eekthecat