textarea - Textarea#
Textarea has 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. Setting the markdown property to true will add markdown support to the textarea.
Example#
{
"code": "PROPERTY_CODE",
"prompt": "PROPERTY_PROMPT",
"type": "textarea",
"markdown": true, // Optional - Added in Version 10.10.00
"textsettings": { // Optional
"fields": [
{
"code": "body_style",
"options": [
{
"text": "Default"
},
{
"text": "Display One",
"value": "display-1"
},
{
"text": "Display Two",
"value": "display-2"
},
{
"text": "Display Three",
"value": "display-3"
},
{
"text": "Title One",
"value": "title-1"
},
{
"text": "Title Two",
"value": "title-2"
},
{
"text": "Title Three",
"value": "title-3"
},
{
"text": "Title Four",
"value": "title-4"
},
{
"text": "Subheading Large",
"value": "subheading-l"
},
{
"text": "Subheading Small",
"value": "subheading-s"
},
{
"text": "Subheading Extra-Small",
"value": "subheading-xs"
},
{
"text": "Paragraph Large",
"value": "paragraph-l"
},
{
"text": "Paragraph Small",
"value": "paragraph-s"
},
{
"text": "Paragraph Extra-Small",
"value": "paragraph-xs"
}
],
"prompt": "Body Style",
"pseudoclasses": [
"normal"
],
"type": "select"
},
{
"code": "font_family",
"options": [
{
"text": "Default"
},
{
"text": "Helvetica",
"value": "Helvetica, sans-serif"
},
{
"text": "Georgia",
"value": "Georgia, serif"
},
{
"text": "Palatino Linotype",
"value": "\"Palatino Linotype\", \"Book Antiqua\", Palatino, serif"
},
{
"text": "Times New Roman",
"value": "\"Times New Roman\", Times, serif"
},
{
"text": "Arial",
"value": "Arial, Helvetica, sans-serif"
},
{
"text": "Arial Black",
"value": "\"Arial Black\", Gadget, sans-serif"
},
{
"text": "Comic Sans MS",
"value": "\"Comic Sans MS\", cursive, sans-serif"
},
{
"text": "Impact",
"value": "Impact, Charcoal, sans-serif"
},
{
"text": "Lucida Sans Unicode",
"value": "\"Lucida Sans Unicode\", \"Lucida Grande\", sans-serif"
},
{
"text": "Tahoma",
"value": "Tahoma, Geneva, sans-serif"
},
{
"text": "Trebuchet MS",
"value": "\"Trebuchet MS\", Helvetica, sans-serif"
},
{
"text": "Verdana",
"value": "Verdana, Geneva, sans-serif"
},
{
"text": "Courier New",
"value": "\"Courier New\", Courier, monospace"
},
{
"text": "Lucida Console",
"value": "\"Lucida Console\", Monaco, monospace"
}
],
"prompt": "Font Family",
"pseudoclasses": [
"normal"
],
"style": "font-family",
"type": "select"
},
{
"code": "font_size",
"label": "px",
"min": 1,
"prompt": "Font Size",
"pseudoclasses": [
"normal"
],
"size": "one-third",
"style": "font-size",
"style_suffix": "px",
"text_type": "number",
"type": "text"
},
{
"code": "font_weight",
"options": [
{
"text": "Default"
},
{
"text": "Ultra-Thin",
"value": 100
},
{
"text": "Light",
"value": 200
},
{
"text": "Book",
"value": 300
},
{
"text": "Normal",
"value": 400
},
{
"text": "Medium",
"value": 500
},
{
"text": "Semi-Bold",
"value": 600
},
{
"text": "Bold",
"value": 700
},
{
"text": "Black",
"value": 900
}
],
"prompt": "Font Weight",
"pseudoclasses": [
"normal"
],
"size": "two-thirds",
"style": "font-weight",
"type": "select"
},
{
"code": "font_color",
"placeholder": "\u0023000000, rgba\u00280,0,0,0\u0029, hsl\u00280,0,0\u0029",
"prompt": "Font Color",
"pseudoclasses": [
"normal"
],
"style": "color",
"type": "color"
}
]
}
}
Full Example#
{
"code": "textarea",
"prompt": "TextArea With TextSettings",
"type": "textarea",
"textsettings": {
"fields": [
{
"code": "selector1",
"prompt": "Selector (Icons)",
"type": "selector",
"size": "whole",
"style": "font-size",
"options": [
{
"text": "Small",
"value": "16px"
},
{
"text": "Medium",
"value": "20px"
},
{
"text": "Large",
"value": "24px"
}
],
"pseudoclasses": ["normal", "hover", "focus", "active"]
}
]
}
}