1.0.1 • Published 4 years ago
triswitch v1.0.1
A 3 position switch
Author:
François Vaillant
Example
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";
- For example in symfony, add in app.scss
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>