Visible
The visible
key in an object's properties can be set using a logical expression that evaluates to true
or false
. This determines whether a specific UI element is shown or hidden based on the conditions specified in the expression. Works in the same way as enabled.
Boolean Logic: Use logical operators (
&&
,||
) to combine multiple conditions.Comparison Operators: Use
==
,!=
,>
,<
,>=
,<=
to compare values.Regex Match: Use
matches
to perform a regex comparison.
Examples
Complex Condition
"visible": "(backgroundType == 'custom' || backgroundType == 'image') && textColor == 'white'"
This makes the property visible only if the backgroundType is either custom' or 'image', and the textColor is 'white'.
Visibility Based on Numeric Ranges
"visible": "opacity > 20 && opacity < 30"
Useful for showing elements that should only be visible within a specific range, e.g., showing a message if the opacity is not between 20-30.
Negation to Hide Elements
"visible": "mySwitchControl != true"
The property is visible when
mySwitchControl
isfalse
.Match a regex
"visible": "name matches /rapid|weaver|elements/"
The property is visible when
name
containsrapid
orweaver
orelements
.
The following example code toggles the visibility of controls based on the value of the switch.
{
"groups": [{
"title": "SWITCH TEST",
"icon": "switch.2",
"properties": [{
"title": "Test Switch",
"id": "testSwitch",
"responsive": false,
"switch": {
"default": false
}
}, {
"information": {},
"title": "Let's Slide…",
"visible": "testSwitch == true"
}, {
"title": "slider",
"id": "slider",
"visible": "testSwitch != false",
"slider": {
"default": 5,
"min": 1,
"max": 50,
"round": true
}
}]
}, {
"title": "MATCHES",
"icon": "equal",
"properties": [{
"title": "Name",
"id": "name",
"responsive": false,
"input": {}
}, {
"information": {},
"title": "Name contains rapid or weaver or elements",
"visible": "name matches /rapid|weaver|elements/"
}]
}]
}
Last updated
Was this helpful?