Fields

Include the field(s) you want to generate for your blocks.

Below are the list of various fields:

---

Text

Render text field.

Source: <TextControl />

Options:

• title string Title for your field.
• id string ID for your field, should be unique for each field.
• type string Type of field. ["Text"]
• value string Default value.
• toggle string Id of the toggle.

Example

{
    "title": "Name",
    "id": "name",
    "type": "text",
    "value": "",
    "toggle": "bio"
}

---

Radio

Render radio options.

Source: <RadioControl />

Options:

• title string Title for your field.
• id string ID for your field, should be unique for each field.
• type string Type of field. ["radio"]
• option string Default option value.
• toggle string Id of the toggle.
• options array List of radio options.

Example

{
    "title": "Gender",
    "id": "gender",
    "option": "m",
    "toggle": "bio",
    "type": "radio",
    "options": [
        {
            "label": "Male",
            "value": "m"
        },
        {
            "label": "Female",
            "value": "f"
        }
    ]
}

---

Color

Render Color Picker.

Source: <ColorPalette />

Options:

• title string - Title for your field.
• id string - ID for your field, should be unique for each field.
• type string - Type of field. ["color"]
• value string - Default color.
• toggle string - ID of the toggle.
• colors array - List of colors.

Example

{
    "title": "Background Color",
    "id": "background-color",
    "type": "color",
    "colors": [
        {
            "name": "Red",
            "color": "#f00"
        },
        {
            "name": "Black",
            "color": "#000"
        },
        {
            "name": "Blue",
            "color": "#00f"
        }
    ]
}

---

Date Time

Render Date Time picker.

Source: <DateTimePicker />

Options:

• title string Title for your field.
• id string ID for your field, should be unique for each field.
• type string Type of field. ["datetime"]
• option string Default option value.
• toggle string Id of the toggle.
• is12hours boolean True if 12 hours.
• locale string Locale

Example

{
    "title": "Date Time",
    "id": "date-time",
    "value": "12/12/2018",
    "toggle": "bio",
    "type": "datetime",
    "is12hours": true,
    "locale": "es-US",
}

---

Button

Render Button.

Source: <Button />

Options:

• title string Button label.
• id string ID for your field, should be unique for each field.
• type string Type of field. ["datetime"]
• toggle string Id of the toggle.
• isDefault boolean is default.

Example

{
    "title": "Save Changes",
    "id": "button",
    "toggle": "bio",
    "type": "button",
    "isDefault": true,
}

---

Button Group

Render Button Group.

Source: <ButtonGroup />

Options:

• title string Button Group label.
• id string ID for your field, should be unique for each field.
• type string Type of field. ["button-group"]
• toggle string Id of the toggle.
• buttons object List of button.

Example

{
    "title": "Button Actions",
    "id": "button",
    "toggle": "bio",
    "isDefault": true,
    "buttons": [
        {
            "label": "Left",
            "isPrimary": true,
            "class": "left"
        },
        {
            "label": "Right",
            "isPrimary": false,
            "class": "right"
        }
    ]
}

---

Range Slider

Render range slider.

Source: <RangeControl />

Options:

• title string Title for your field.
• id string ID for your field, should be unique for each field.
• type string Type of field. ["range"]
• value string Default value.
• toggle string Id of the toggle.
• min float Minimum number.
• max float Maximum number.

Example

{
    "title": "Volume",
    "id": "volume",
    "type": "range",
    "value": "50",
    "toggle": "bio",
    "min": "1",
    "max": "100"
}

---

Textarea

Render text area.

Source: <TextareaControl />

Options:

• title string Title for textarea.
• id string Field ID, should be unique for each field.
• type string Type of field. ["textarea"]
• value string Default value.
• toggle string Id of the toggle.
• row integer Number of rows

Example

{
    "title": "Introduction",
    "id": "introduction",
    "type": "textarea",
    "value": "",
    "toggle": "bio",
    "row": "30"
}

---

Tree

Render Tree view.

Source: <TreeSelect />

Options:

• title string Title for TreeSelect dropdown.
• id string Field ID, should be unique for each field.
• type string Type of field. ["tree"]
• optionlabel string Option label.
• selectedId string Default Selected option id.
• toggle string Id of the toggle.
• tree Array Tree options.

Example

{
    "title": "Select Post",
    "type" : "tree",
    "optionlabel": "Select option",
    "selectedId": "p211",
    "tree":[
        {
            name: 'Post 1',
            id: 'p1',
            children: [
                { name: 'Descend 1 of post 1', id: 'p11' },
                { name: 'Descend 2 of post 1', id: 'p12' },
            ],
        },
        {
            name: 'post 2',
            id: 'p2',
            children: [
                {
                    name: 'Descend 1 of post 2',
                    id: 'p21',
                    children: [
                        {
                            name: 'Descend 1 of Descend 1 of post 2',
                            id: 'p211',
                        },
                    ],
                },
            ],
        },
    ]     
}

---

Select

Render dropdown.

Source: <SelectControl />

Options:

• title string Title for your field.
• id string ID for your field, should be unique for each field.
• type string Type of field. ["select"]
• option string Default option value.
• toggle string Id of the toggle.
• options array List of dropdown options.

Example

{
    "title": "Country",
    "id": "country",
    "type": "select",
    "value": "india",
    "options": [
        {
            "label": "India",
            "value": "india"
        },
        {
            "label": "USA",
            "value": "usa"
        }
    ]
}

---