DizmoElements

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

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

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

This Inputfield element will then be converted to a dizmo styled textfield at the start of the dizmo.

Note: All elements that are added after the start of the dizmo, or elements with dynamic parts that are added after that start of the dizmo (e.g the options in a selectbox), need to be initialized manually.

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