Color Input

Color picker with optional opacity

Image

Property JSON

{
    "type": "ColorOpacityInput",
    "properties": {
        "labelName": "Button Color",
        "bindingPropertyName": "buttonColor",
        "allowCheckbox": false,
        "hasOpacity": false
    }
}

State definition

The parent property name needs to match the string specified in bindingPropertyName property. In this example the parent property name is "buttonColor"

{
    "buttonColor": {
        "type": "solid",
        "color": [
            {
                "color": "#22ee33",
                "alpha": 1,
                "ratio": 0
            }
        ],
        "rotation": 0,
        "enabled": true
    }
}

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.

Color is an array in preparation for supporting gradient colours. This is not currently implemented so your color state defintion needs to be an array of just 1 colour object

Configurable properties

bindingPropertyName

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

mandatory

allowCheckbox

bool - specifies whether you want a checkbox to the left of the colour picker.

The checkbox is bound to parentProperty.enabled

defaults to true

hasOpacity

bool - specifies whether you want the opacity input box to appear to the right of the colour picker

defaults to true

disabled

bool - if set to true this will disable the input box for interaction

defaults to false