Nascent Personality Manifestation

    @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

    Keywords

    none

    Install

    npm i @momsfriendlydevco/angular-ui-toggle

    DownloadsWeekly Downloads

    5

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    30.5 kB

    Total Files

    15

    Last publish

    Collaborators

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