Hi there, if I’d like to use a segmented UI control for z-index “none - auto - custom“, how can I test the value of the user choice?
I read in the documentation, If Documentation that the @if is only for testing if a value is true or false. Is this correct?
There is a possibility for test “value = something → do something”?
Thanks in advance.
Hi there, Do you mean inside another custom control, to decide if that control should be shown or not?
Or do you mean to do something in the template based on the value of the segmented UI control?, short answer would be “No”.
If you need to show / hide another control based on the value of that one, use “visible”:
{
“title”: “Some Control”,
“id”: “customID”,
“responsive”: false,
“visible”: “segmented-UI-control-ID == ‘custom’”,
“text”: {
“default” : “”
}
So all you need to do for that is set the properties like this example, and write for this example {{zcontrol}} in the template, and it will be replaced with the selected value.
{
“groups”: [{
“title”: “Segmented Example”,
“properties”: [{
“title”: “Z Index”,
“id”: “zcontrol”,
“segmented”: {
“items”: [{
“value”: “z-auto”,
“title”: “Auto”
}, {
“value”: “z-99”,
“title”: “Custom”,
“default”: true
}, {
“value”: “”,
“title”: “None”
}]
}
}]
}]
}
Thanks, this is correct and I think the same… but if I’d like to set a custom value, not z-99 and I put in template box {{zcontrol}} I can’t customize the vale.
Make the value of “Custom” return “custom”.
Make a number control that only becomes visible if value of Custom is “custom”, as shown earlier.
Then process in your hooks file:
const transformHook = (rw) => {
const { zcontrol, znumber } = rw.props;
let processed_z = "";
switch (zcontrol) {
case "custom":
processed_z = "z-" + znumber;
break;
case "z-auto":
processed_z = "z-auto";
break;
default:
processed_z = "";
break;
}
rw.setProps({
node: rw.node,
processed_z
});
};
exports.transformHook = transformHook;
Thank you!!!