Skip to content

text - Textbox#


Text Fields have an optional textsettings object that can be defined in the property. If included it will output a Settings icon within the text box to enable advanced editing of the Text. This includes Font Size, Font Color and Text Alignment for regular text as well as focus, hover, active state.

Example#

{
    "code": "PROPERTY_CODE",
    "prompt": "PROPERTY_PROMPT",
    "type": "text"
}

Full Example#

{
    "code": "heading_text",
    "prompt": "Heading Text",
    "type": "text",
    "textsettings": {
        "fields": [
            {
                "code": "size",
                "options": [
                    {
                        "text": "Small",
                        "value": "16px"
                    },
                    {
                        "text": "Medium",
                        "value": "20px"
                    },
                    {
                        "text": "Large",
                        "value": "24px"
                    }
                ],
                "prompt": "Font Size",
                "pseudoclasses": ["normal", "hover", "focus", "active"],
                "size": "half",
                "style": "font-size",
                "type": "selector"
            },
            {
                "code": "color",
                "prompt": "Font Color",
                "pseudoclasses": ["normal", "hover", "focus", "active"],
                "size": "half",
                "style": "color",
                "type": "color"
            }
        ]
    }
}