Properties.json

The properties.json file defines the User Interface for an Element. Browse the UI Control docs for a full list of available controls.

{
    "groups": [{
        "title" : "Formatting",
        "icon": "textformat.size",
        "properties" : [{
            "title": "Alignment",
            "property": "alignment",
            "segmented": {
                "items": [{
                    "value": "align-left",
                    "icon": "text.alignleft"
                }, {
                    "value": "align-center",
                    "icon": "text.aligncenter",
                    "default": true
                }, {
                    "value": "align-right",
                    "icon": "text.alignright",
                    "title": "Right"
                }]
            }
        }]
    }]
}

An example of setting Default Properites on various controls.

{
    "groups": [{
        "title" : "Content",
        "properties" : [{
            "title": "Text Style",
            "property": "textStyle",
            "themeTextStyle": {
                "default": { "base":{"name": "lg"}, "sm":{"name":"2xl"}, "md":{"name":"4xl"} }
            }
        },{
            "title": "Theme Font",
            "property": "textFont",
            "themeFont": {
                "default": { "base": { "name": "heading" }, "sm": { "name": "quote" } }
            }
        }, {
            "title" : "Padding",
            "property" : "themeSpacing",
            "themeSpacing": {
                "mode": "padding",
                "default": {
                    "base": {
                        "custom": true,
                        "left" : 10,
                        "right" : 20,
                        "top" : 30,
                        "bottom" : 40,
                        "linkVertical": true
                    },
                    "sm": {
                        "custom": false,
                        "left" : "xl",
                        "right" : "xl",
                        "top" : "xl",
                        "bottom" : "xl",
                    }
                }
            }
        }, {
            "title": "Border Width",
            "property": "borderWidth",
            "themeBorderWidth": {
                "default": {
                    "base": {
                        "custom": false,
                        "left" : "2",
                        "right" : "2",
                        "top" : "2",
                        "bottom" : "2",
                        "linkHorizontal": true
                    },
                    "sm": {
                        "custom": false,
                        "left" : "8",
                        "right" : "8",
                        "top" : "8",
                        "bottom" : "8",
                        "linkHorizontal": true
                    },
                }
            }
        }, {
            "title": "Border Radius",
            "property": "borderRadius",
            "themeBorderRadius": {
                "default": {
                    "base": {
                        "custom": false,
                        "topLeft" : "sm", 
                        "topRight" : "sm",
                        "bottomLeft" : "sm",
                        "bottomRight" : "sm",
                        "linkHorizontal": true
                    },
                    "sm": {
                        "custom": true,
                        "topLeft" : 5,
                        "topRight" : 5,
                        "bottomLeft" : 5,
                        "bottomRight" : 5,
                        "linkHorizontal": true
                    },
                }
            }
        }, {
            "title": "Spacing",
            "property": "spacing",
            "themeSpacing": {
                "default": {
                    "base": {
                        "custom": false,
                        "left" : "sm",
                        "right" : "sm",
                        "top" : "sm",
                        "bottom" : "sm",
                        "linkHorizontal": true
                    },
                    "sm": {
                        "custom": false,
                        "left" : "lg",
                        "right" : "lg",
                        "top" : "lg",
                        "bottom" : "lg",
                        "linkHorizontal": true
                    },
                }
            }
        }, {
            "title" : "Shadow",
            "property" : "themeShadow",
            "mode": "shadow",
            "themeShadow": {
                "default": { "base":{"name": "sm"}, "sm":{"name": "lg"}, "md":{"name":"xl"} }
            }
        }, {
            "title": "Slider",
            "property": "slider",
            "slider": {
                "default": "45"
                "min": 20,
                "max": 60,
                "round": true,
                "units": "vw"
            }
        }, {
            "title": "Slider 2",
            "property": "slider2",
            "slider": {
                "default": { "base" : 20, "sm" : 30, },
                "min": 20,
                "max": 60,
                "round": true,
                "units": "vw"
            }
        }, {
            "title": "Slider 3",
            "property": "slider3",
            "slider": {
                "default": "3",
                "content": [
                    {"title": "a", "value": "2"}, 
                    {"title": "b", "value": "3"}, 
                    {"title": "c", "value": "4"}
                ]
            }
        }, {
            "title": "Alignment",
            "property": "alignment",
            "segmented": {
                "default": {
                    "base": "w-auto",
                    "md": "w-full"
                },
                "items": [{
                    "value": "w-full",
                    "icon": "text.alignleft"
                }, {
                    "value": "w-asdf",
                    "icon": "text.alignleft"
                }, {
                    "value": "w-auto",
                    "icon": "text.aligncenter"
                }, {
                    "value": "custom",
                    "icon": "text.alignright",
                    "title": "Custom"
                }]  
            }
        }]
    }]
}