dizmoElements

The dizmoElements library provides UI elements that can be used to design your dizmo. It is included in dizmoGen and also available as a standalone library,

An example: To add an UI element, first add the HTML element to index.html:

<input type="text" data-type="dizmo-input">

The Inputfield element is then converted to a dizmo styled textfield at the start of the dizmo.

All dynamic elements that are added after the start of the dizmo, e.g., the options in a selectbox, need to be initialized manually. These elements include:

• Checkbox
• Radiobutton
• Slider
• Selectbox
• Switch
• Button
• Inputfield
• Textarea
• List
• Accordion
• Notifications

Practical example

We are adding three inputfields for having a maximum, a mininum and a unit input:

<div id="back">
    <div class="maximum_value">
        <input id="maximum_value_inputfield" type="text" data-type="dizmo-input">
    </div>
    <div class="minimum_value">
        <input id="minimum_value_inputfield" type="text" data-type="dizmo-input">
    </div>
    <div class="unit">
        <input id="unit_inputfield" type="text" data-type="dizmo-input">
    </div>
    <div class="done-btn-wrapper">
        <button class="done-btn" data-type="dizmo-button">Done</button>
    </div>
</div>

External resources

• Practical example Gauge on Github