Exo -> Exo Custom Elements -> Exo Custom Input Controls

Exo - Custom Input Controls

Custom HTML elements described here wrap some useful structures for building UIs with exo

Installation

Include the exo.js script to use HTML custom elements: 


            <!-- js file is optional, include if you use exo custom HTML elements -->
            <script src="exo.js" type="text/javascript"></script>

Common attributes

Name Example Values Description
label Enter your name: Display a label above the control
tooltip Use this control to enter your name. Display a question mark button above the control, display text as a tooltip on hover or click
fg-color, bg-color, border-color dark-red, dark-orange, dark-blue, dark-green, dark-purple, dark-brown, dark-gray, dark-pink, dark-yellow, light-red, light-orange, light-blue, light-green, light-purple, light-brown, light-gray, light-pink, light-yellow, white, black Set the foreground, background or border color. Not yet consistently supported for all input controls.
disabled true, false Enable or disable this control

Checkbox


    <exo-checkbox id="test_checkbox" label="test"
     value="true" tooltip="Help!!!" border-color="dark-purple"
     fg-color="dark-red"></exo-checkbox>
<script>
    document.getElementById("test_checkbox")
    .addEventListener("change",e => { console.log(e.target.checked); })
</script>

Toggle


    <exo-toggle id="test_toggle" label="test"
     true-text="ON" false-text="OFF" value="false"
     tooltip="Help!!!" fg-color="light-gray"
     bg-color="dark-red"></exo-toggle>
<script>
    document.getElementById("test_toggle")
    .addEventListener("change",e => { console.log(e.target.checked); } );
</script>

Text


    <exo-text full-width id="test_text" label="test"
     value="Enter text here" tooltip="Help!!!"
     fg-color="dark-green"></exo-text>
<script>
    document.getElementById("test_text")
    .addEventListener("change",e => { console.log(e.target.value); })
</script>

Select

The options attribute of exo-select should be assigned a JSON encoded array, where each element is an array containing 2 items: ["value","LABEL"].


    <exo-select id="test_select" label="test"
     value="ccc" tooltip="Help!!!" options='[["aaa","AAA"],["bbb","BBB"]]'
     fg-color="dark-green"></exo-select>
<script>
    document.getElementById("test_select")
    .addEventListener("change",e => { console.log(e.target.value); })
</script>

Select Size=5


    <exo-select size="5" id="test_select_size"
     label="test" value="aaa" tooltip="Help!!!"
     options='[["aaa","AAA"],["bbb","BBB"],["ccc","CCC"],["ddd","DDD"],["eee","EEE"],["fff","FFF"]]'
     fg-color="dark-green"></exo-select>
<script>
    document.getElementById("test_select_size")
    .addEventListener("change",e => { console.log(e.target.value); })
</script>

Select Size=5, Multiple

If the multiple attribute is specified, the value attribute should be assigned a JSON encoded array containing zero or more values.


    <exo-select size="5" id="test_select_multiple"
     label="test" value='["aaa","bbb"]' tooltip="Help!!!"
     options='[["aaa","AAA"],["bbb","BBB"],["ccc","CCC"],["ddd","DDD"],["eee","EEE"],["fff","FFF"]]'
     fg-color="dark-green" multiple></exo-select>
<script>
    document.getElementById("test_select_multiple")
    .addEventListener("change",e => { console.log(e.target.value); });
</script>

Radio Buttons

The options attribute of exo-radio should be assigned a JSON encoded array, where each element is an array containing 2 items: ["value","LABEL"].


    <exo-radio id="test_radio" label="test" value="aaa"
     options='[["aaa","AAA"],["bbb","BBB"]]'
     tooltip="Help!!!" fg-color="dark-green"></exo-radio>
<script>
    document.getElementById("test_radio")
    .addEventListener("change",e => { console.log(e.target.value); })
</script>

Number


    <exo-number id="test_number" label="test"
     value="10" min="0" max="20" step="5"
     tooltip="Help!!!" fg-color="dark-purple"></exo-number>
<script>
    document.getElementById("test_number")
    .addEventListener("change",e => { console.log(e.target.value); })
</script>

Range


    <exo-range id="test_range" label="test" value="10"
     min="0" max="20" tooltip="Help!!!" fg-color="dark-purple"></exo-range>
<script>
    document.getElementById("test_range")
    .addEventListener("change",e => { console.log(e.target.value); })
</script>

Date


    <exo-date id="test_date" label="test" value="2018-04-10"
     min="2018-01-01" max="2018-12-31" tooltip="Help!!!"
     fg-color="dark-purple"></exo-date>
<script>
    document.getElementById("test_date")
    .addEventListener("change",e => { console.log(e.target.value); })
</script>

File


    <exo-file id="test_file" label="test" filename="?"
     button-text="Choose A File" tooltip="Help!!!"
     fg-color="dark-purple"></exo-file>
<script>
    document.getElementById("test_file")
    .addEventListener("exo-file-changed",e => { console.log(JSON.stringify(e.detail)); })
</script>

Text Area


    <exo-textarea id="test_textarea" label="test"
     value="Enter text here" tooltip="Help!!!"
     rows="5" cols="40" bg-color="light-green"></exo-textarea>
<script>
    document.getElementById("test_textarea")
    .addEventListener("change",e => { console.log(e.target.value); })
</script>

Download


    <exo-download id="test_download" fg-color="dark-blue"
     bg-color="light-gray" download-filename="test.txt"
     label="test" tooltip="Help!!!"></exo-download>
<script>
    document.getElementById("test_download")
    .addEventListener("exo-download",e => {
    console.log("Download starting...");
    e.target.setAttribute("download-mimetype","text/plain");
    e.target.setAttribute("download-content","Download Content!");
    });
</script>