Naboo's Podracing Misadventure

    triswitch

    1.0.1 • Public • Published

    A 3 position switch

    Author:

    François Vaillant
    

    Example

    see on codepen

    How to use

    Use it with npm

    npm install triswitch
    • Create a JS file with (for example)
    import {Switch3} from "triswitch";
    const switcher = new Switch3(['non', '?', 'oui'], [2, 0, 1], 'switcher', 1);
    switcher.init();
    • Don't forget to add CSS

      • For example in symfony, add in app.scss
       @import "~triswitch";  
    • In your view, create a div with switcher id and give it a least 100px width

    Use it simply

    <link rel="stylesheet" href="switch3.css">
    <script src="switch3.js"></script>
    

    Choose your target

    • if you allready have an input in order to use switch, give it an id attribute et add :
    type="hidden"

    Then, create an empty div with an id

    <div id="my-container"></div>
    • if you don't have an input, just create a div, switch 3 will create an input for your
    <div id="my-container"></div>

    the generated input is

    <input type="hidden" id="switch3-val" name="switch3-val">

    Create the switch

     constructor(labels, values, renderZoneId, initVal= 0, name = 'switch3', destinationInputId = null) 
    • labels is an array with the three labels from left to right
    • values is array with the three values corresponding to the choices from left to right
    • renderZondeId is the id of the div where to render the switch
    • initVal is the value of the switch when it will be first rendered (optionnal, default 0, values : 0, 1 or 2)
    • name is a string you like to generate ids if you need multiple switches. In that case, the generated input has id name-switch3-val
    • destinationInputId is the id of your input if you allready have one (Optionnal, default null)

    Example of use

    <div id="switcher" style="width:100px;"></div>
    <script>
     const switcher = new Switch3(['non', '?', 'oui'], [2, 0, 1], 'switcher', 1); 
     switcher.init();
    </script>

    Install

    npm i triswitch

    DownloadsWeekly Downloads

    0

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    8.03 kB

    Total Files

    4

    Last publish

    Collaborators

    • frvaillant