4.C. Doon Interfaces

The following fields are predefined and ready to use.

4.C.1. Slug Field

Attributes

autocomplete on, off Specifies whether the field should have autocomplete enabled
autofocus autofocus Specifies that the field should automatically get focus when the page loads
pattern regexp Specifies a regular expression that the field value is checked against
placeholder text Specifies a short hint that describes the expected value of the field
required required Specifies that the field must be filled out before submitting the form
data-source selector The CSS selector to which to based the value from
Code Sample
<input
    data-do="slug-field"
    data-source="input[name=title]"
    type="text"
    name="icon"
/>

4.C.2. Icon Field

Code Sample
<input
    data-do="icon-field"
    type="text"
    name="icon"
/>

4.C.3. Range Field

Attributes

placeholder text Specifies a short hint that describes the expected value of the field
required required Specifies that the field must be filled out before submitting the form
max number Specifies the maximum value for the field
min number Specifies a minimum value for the field
step number Specifies the legal number intervals for an input field
Code Sample
<input
    data-do="multirange-field"
    type="number"
    max="10"
    step="0.5"
    min="0"
    data-max="10"
    data-step="0.5"
    data-min="0"
    class="form-control"
    name="range"
/>

4.C.4. Date Field

Attributes

autocomplete on, off Specifies whether the field should have autocomplete enabled
autofocus autofocus Specifies that the field should automatically get focus when the page loads
placeholder text Specifies a short hint that describes the expected value of the field
required required Specifies that the field must be filled out before submitting the form
max date Specifies the maximum value for the field
min date Specifies a minimum value for the field
Code Sample
<input
    aria-haspopup="true"
    aria-expanded="false"
    class="form-control date"
    data-do="date-field"
    name="date_1"
    type="text"
    value="1984-10-24"
/>

4.C.5. DateTime Field

Attributes

autocomplete on, off Specifies whether the field should have autocomplete enabled
autofocus autofocus Specifies that the field should automatically get focus when the page loads
placeholder text Specifies a short hint that describes the expected value of the field
required required Specifies that the field must be filled out before submitting the form
max date Specifies the maximum value for the field
min date Specifies a minimum value for the field
Code Sample
<input
    class="form-control date"
    data-do="datetime-field"
    name="datetime_1"
    type="text"
    value="1984-10-24 00:12:00"
/>

4.C.6. Mask Field

Attributes

autocomplete on, off Specifies whether the field should have autocomplete enabled
autofocus autofocus Specifies that the field should automatically get focus when the page loads
pattern regexp Specifies a regular expression that the field value is checked against
placeholder text Specifies a short hint that describes the expected value of the field
required required Specifies that the field must be filled out before submitting the form
data-format string Input field value format

Format

  • 9 : numeric
  • a : alphabetical
  • * : alphanumeric`

It is possible to define some parts in the mask as optional. This is done by using [] as in (99) 9999[9]-9999.

The above example will allow values like (99) 99999-9999 or (99) 9999-9999. Dynamic masks can change during the input. To define a dynamic part use {}.

  • {n} => n repeats
  • {n|j} => n repeats, with j jitmasking
  • {n,m} => from n to m repeats
  • {n,m|j} => from n to m repeats, with j jitmasking

Also {+} and {*} is allowed. + start from 1 and * start from 0.

Code Sample
<input
    class="form-control"
    data-do="mask-field"
    data-format="99-99-9999"
    name="mask_1"
    type="text"
    placeholder="99-99-9999"
/>

4.C.7. Tag Field

Code Sample
<div
    class="tag-field"
    data-do="tag-field"
    data-name="tag_1"
>
</div>

4.C.8. Select Field

Attributes

autofocus autofocus Specifies that the field should automatically get focus when the page loads
required required Specifies that the field must be filled out before submitting the form
size number Defines the number of visible options in a drop-down list
multiple “multiple” Whether to accept multiple options
Code Sample
<select
    class="form-control"
    data-do="select-field"
    multiple="multiple"
    name="select_2[]"
>
    ...
</select>

4.C.9. WYSIWYG Editor

Attributes

cols number Specifies the visible width of a text area
maxlength number Specifies the maximum number of characters allowed in the text area
placeholder text Specifies a short hint that describes the expected value of the field
required required Specifies that the field must be filled out before submitting the form
rows number Specifies the visible number of lines in a text area
Code Sample
<textarea
    class="form-control"
    data-do="wysiwyg"
    name="wysiwyg_1"
></textarea>

4.C.10. Markdown Editor

Attributes

placeholder text Specifies a short hint that describes the expected value of the field
required required Specifies that the field must be filled out before submitting the form
data-height number height size of the editor
data-width number width size of the editor
Code Sample
<textarea
    class="form-control"
    data-do="markdown-editor"
    name="markdown"
    rows="10"
></textarea>

4.C.11. Code Editor

Code Sample
<textarea
    class="form-control hidden"
    data-do="code-editor"
    name="code"
></textarea>

4.C.12. File Field

Attributes

data-accept string Comma separated mime types
data-class string Class names to add to the field wrapper
data-width number Cropping width applied to images
data-height number Cropping height applied to images
data-multiple 0, 1 Whether to accept multiple files
Code Sample
<table
    class="table table-striped file-field"
    data-accept="image/png,image/jpg,image/jpeg,image/gif"
    data-do="file-field"
    data-name="images_1"
    data-multiple="1"
    data-width="200"
    data-height="200"
>
    <thead>
        <tr>
            <th>Preview</th>
            <th>Name</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr class="file-field-none">
            <td colspan="5">
                <div class="alert alert-info">No Files Selected</div>
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="5">
                <button
                    class="file-field-upload btn btn-info"
                    type="button"
                >
                    Choose Files
                </button>
            </td>
        </tr>
    </tfoot>
</table>

4.C.13. Knob Field

Code Sample
<input
    type="text"
    data-do="knob-field"
    data-min="-50"
    data-max="50"
    data-fgColor="#66CC66"
    data-angleOffset=-125
    data-angleArc=250
    data-rotation=anticlockwise
    data-width="75"
    data-height="75"
    name="knob_1"
    value="0"
/>

4.C.14. Text List Field

Code Sample
<div
    data-do="textlist-field"
    class="textlist-field"
    data-name="foo"
    data-placeholder="Enter Something"
>
    <a class="field-add btn btn-success" href="javascript:void(0)">
        <i class="fas fa-plus"></i>
        <span>Add</span>
    </a>
</div>

4.C.15. Textarea List Field

Code Sample
<div
    data-do="textarealist-field"
    class="textarealist-field"
    data-name="foo"
    data-rows="10"
    data-placeholder="Enter Something"
>
    <a class="field-add btn btn-success" href="javascript:void(0)">
        <i class="fas fa-plus"></i>
        <span>Add</span>
    </a>
</div>

4.C.16. Meta Field

Code Sample
<div
    data-do="meta-field"
    class="meta-field"
    data-name="foo"
>
    <a class="field-add btn btn-success" href="javascript:void(0)">
        <i class="fas fa-plus"></i>
        <span>Add</span>
    </a>
</div>

4.C.17. Table Field

Code Sample
<div
    data-do="table-field"
    class="table-field"
    data-name="foo[bar]"
    data-columns="Column 1|Column 2|Column 3"
>
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Actions</th>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
            </tr>
        </thead>
        <tbody>
            ...
        </tbody>
    </table>
    <a
        class="field-add btn btn-success"
        href="javascript:void(0)"
        data-do="table-field-add"
        data-on="click"
    >
        <i class="fas fa-plus"></i>
        <span>Add Row</span>
    </a>
</div>