Font

Image

Property JSON

{
    "type": "Font",
    "properties": {
        "titleLabel": "Title font:",
        "hasAlignment": false,
        "hasCapitalisation": true,
        "hasTitle": false,
        "hasBold": true,
        "hasItalics": true,
        "hasUnderline": true,
        "hasColor": true,
        "hasOpacity": true,
        "hasSize": true,
        "bindingPropertyName": "labels"
    }
}        

State definition

The property name needs to match the string specified in bindingPropertyName property.

{
    "labels": {
        "text": "",
        "enabled": true,
        "font": {
            "weight": "normal",
            "style": "normal",
            "decoration": "none",
            "color": [
                {
                    "color": "#333333",
                    "alpha": 1,
                    "ratio": 0
                }
            ],
            "size": 15,
            "family": "Open Sans",
            "align": "left",
            "verticalAlign": "top"
        },
        "capitalisation": "upper"
    }
}

This element has a number of configurable properties. If a property has a default value then you do not need to provide it in the propertyPanel.json file unless you want to specify a value different to the default.

Configurable properties

bindingPropertyName

string - the parent property name from defaultState with which to connect to.

mandatory

titleLabel

string - The text to display above the font element as a title

hasAlignment

bool - specifies whether you want to show the alignment buttons or not

defaults to true

hasCapitalisation

bool - specifies whether you want to show the capitalisation buttons or not

defaults to true

hasTitle

bool - specifies whether you want to show the title or not

defaults to true

hasBold

bool - specifies whether you want to show the bold button or not

defaults to true

hasItalics

bool - specifies whether you want to show the italics button or not

defaults to true

hasUnderline

bool - specifies whether you want to show the underline button or not

defaults to true

hasColor

bool - specifies whether you want the font colour picker or not

defaults to true

hasOpacity

bool - specifies whether you want to show the colour opacity input or not

defaults to true

hasSize

bool - specifies whether you want to show the font size picker or not

defaults to true