I want to give the user the ability to customize border-radius on my component (widget) in ApostropheCMS.
I have written the following schema for the same:
borderRadiusValue: {
label: 'Border Radius value',
type: 'range',
unit: 'px',
min: 0,
max: 50,
step: 1,
def: 0,
if: {
havingBorderRadius: true
}
},
I want to apply the value from borderRadiusValue
as inline style in my html so that the it looks something like this style = "border-radius: {{widget.borderRadiusValue}} 0 0 {{widget.borderRadiusValue}}
However, for borderRadiusValue
as 50px, I only get style applied as style = "border-radius: 50 0 0 50
. Instead, I want it to be style = "border-radius: 50px 0 0 50px
. Does ApostropheCMS have this feature? How do I go about implementing this?
range
fields have a numeric value, without units. So the simplest way to do what you want is:
style = "
border-radius:
{{widget.borderRadiusValue}}px
0
0
{{widget.borderRadiusValue}}px
"
Note the "px" after emitting each number.