4.C. Reference Doon Interfaces - CradlePHP/Cradle GitHub Wiki

• 4.C.1. Slug Field
• 4.C.2. Icon Field
• 4.C.3. Range Field
• 4.C.4. Date Field
• 4.C.5. DateTime
• 4.C.6. Mask Field
• 4.C.7. Tag Field
• 4.C.8. Select Field
• 4.C.9. WYSIWYG Editor
• 4.C.10. Markdown Editor
• 4.C.11. Code Editor
• 4.C.12. File Field
• 4.C.13. Knob Field
• 4.C.14. Text List
• 4.C.15. Textarea List
• 4.C.16. Meta List
• 4.C.17. Table Field

The following fields are predefined and ready to use.

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

<input
    data-do="slug-field"
    data-source="input[name=title]"
    type="text"
    name="icon"
/>

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

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

<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"
/>

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

<input
    aria-haspopup="true"
    aria-expanded="false"
    class="form-control date"
    data-do="date-field"
    name="date_1"
    type="text"
    value="1984-10-24"
/>

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

<input
    class="form-control date"
    data-do="datetime-field"
    name="datetime_1"
    type="text"
    value="1984-10-24 00:12:00"
/>

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

• 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.

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

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

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

<select
    class="form-control"
    data-do="select-field"
    multiple="multiple"
    name="select_2[]"
>
    ...
</select>

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

<textarea
    class="form-control"
    data-do="wysiwyg"
    name="wysiwyg_1"
></textarea>

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

<textarea
    class="form-control"
    data-do="markdown-editor"
    name="markdown"
    rows="10"
></textarea>

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

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

<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>

<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"
/>

<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>

<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>

<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>

<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>