Node's Package Magician

    angular-ui-switch

    0.1.1 • Public • Published

    angular-ui-switch

    This is a simple iOS 7 style switch directive for AngularJS. You can use this module as you would use the default HTML checkbox input element. This is a super lightweight module and you can completely change the design using just CSS.

    Supported by all modern browsers: Chrome, Firefox, Opera, Safari, IE8+

    YoomJS

    Inspired by switchery - in angular way.

    Installation

    Download the package from github. The package is also available over npm install angular-ui-switch or bower install angular-ui-switch.

    Include javascript and css files into your page.

    <!DOCTYPE html>
    <html lang="en" ng-app="app">
    <head>
      ...
      <link rel="stylesheet" href="/ui-switch.min.css"/>
    </head>
    <body>
      ...
      <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.min.js"></script> 
      <script src="/ui-switch.min.js"></script> 
    </body>
    </html>

    Declare a dependency on the module.

    angular.module('myModule', ['uiSwitch']);

    Insert the switch in your html template.

    <form>
      <switch id="enabled" name="enabled" ng-model="enabled" class="green"></switch>
      <br>{{ enabled }}
    </form>

    Add optional on/off text

    <form>
      <switch id="enabled" name="enabled" ng-model="enabled" on="On" off="Off" class="green"></switch>
      <br>{{ enabled }}
    </form>

    Disabled state

    <form>
      <switch id="enabled" name="enabled" ng-model="enabled" disabled="true" class="green"></switch>
      <br>{{ enabled }}
    </form>

    Design

    You can completely change the design. All the magic is hidden inside two CSS classes.

    .switch {
      /* frame */
    }
    .switch small {
      /* button */
    }
    .switch.checked {
      /* frame when enabled */
    }
    .switch.checked small {
      /* button when enabled */
    }

    Publishing

    1. Update version in package.json and bower.json.

    2. Run make compile to minify files.

    3. Run make publish to publish.

    Install

    npm i angular-ui-switch

    DownloadsWeekly Downloads

    5,935

    Version

    0.1.1

    License

    MIT

    Last publish

    Collaborators

    • xpepermint