@momsfriendlydevco/angular-ui-toggle
Angular-UI-Toggle ================= An Apple iOS inspired toggle switch input control for [Angular 1](https://angularjs.org) applications. This angular directive is extremely lightweight, not requiring a ton of dependencies (only Angular). Options to easi
Last updated 2 years ago by hash-bang .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @momsfriendlydevco/angular-ui-toggle 
SYNC missed versions from official npm registry.

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

Current Tags

  • 1.0.4                                ...           latest (2 years ago)

4 Versions

  • 1.0.4                                ...           2 years ago
  • 1.0.2                                ...           3 years ago
  • 1.0.1                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (1)
Dev Dependencies (18)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |