Neural Prediction Model

    vt-toggle

    1.0.1 • Public • Published

    vt-toggle

    Turn HTML checkbox inputs into fancy toggle switches with just a CSS class

    Demo: https://victornpb.github.io/vt-toggle/

    What is this?

    You can turn a simple checkbox like this

    Into this fancy toggle just by addind the vt-toggle class

    <input type="checkbox" class="vt-toggle">
    

    Install

    Ok, cool! how can I get it?

    NPM

    npm install vt-toggle
    

    Bower

    bower install vt-toggle
    

    CDN

    -
    

    Download

    https://github.com/victornpb/vt-toggle/releases/
    

    Importing into project

    Import using link

    <link rel="stylesheet" type="text/css" href="bower_components/vt-toggle/css/vt-toggle.css">
    
    Import using SASS
    @import "bower_components/vt-toggle/scss/vt-toggle";
    

    Creating your own classes using SASS

    You can create your own classes using the SASS mixin.

    @mixin vt-toggle($toggleWidth, $toggleHeight, $handleMargin, $roundness, $on-color, $off-color, $label)
    

    Example:

    @import "bower_components/vt-toggle/scss/vt-toggle";
    
    $blue: #00f;
    $red: #f00;
    
    input.vt-toggle.blue {
        @include vt-toggle(44px, 22px, 1px, 1, $blue, gray, false);
    }
    input.vt-toggle.red {
        @include vt-toggle(44px, 22px, 1px, 1, $red, gray, false);
    }
    

    Then you can use:

    <input type="checkbox" class="vt-toggle blue"> I'm blue toggle
    <input type="checkbox" class="vt-toggle red"> I'm red toggle
    

    Default styles

    Default Sizes:

    class Dimensions Preview
    xs 18x22
    sm 32x16
    md 44x22 (default)
    lg 64x32

    States

    State Preview
    On
    Off
    Disabled (on)
    Disabled (off)

    Install

    npm i vt-toggle

    DownloadsWeekly Downloads

    3

    Version

    1.0.1

    License

    Apache-2.0

    Unpacked Size

    50.3 kB

    Total Files

    7

    Last publish

    Collaborators

    • vitim