"radius" property of View

The "radius" property sets the elliptical corner radius of the View. Radii are specified by the RadiusPropertyinterface that implements the Properties interface (see above).For this, the following properties of the SizeUnit type are used:

Property Constant Description
"top-left-x" TopLeftX x-radius of the top left corner
"top-left-y" TopLeftY y-radius of the top left corner
"top-right-x" TopRightX x-radius of the top right corner
"top-right-y" TopRightY y-radius of the top right corner
"bottom-left-x" BottomLeftX x-radius of the bottom left corner
"bottom-left-y" BottomLeftY y-radius of the bottom left corner
"bottom-right-x" BottomRightX x-radius of the bottom right corner
"bottom-right-y" BottomRightY y-radius of the bottom right corner

If the x- and y-radii are the same, then you can use the auxiliary properties

Property Constant Description
"top-left" TopLeft top left corner radius
"top-right" TopRight top right corner radius
"bottom-left" BottomLeft bottom left corner radius
"bottom-right" BottomRight bottom right corner radius

To set all radii to the same values, use the "x" and "y" properties

The RadiusProperty interface is created using the NewRadiusProperty function. Example

view.Set(rui.Radius, NewRadiusProperty(rui.Params{
	rui.X: rui.Px(16),
	rui.Y: rui.Px(8),
	rui.TopLeft: rui.Px(0),
	rui.BottomRight: rui.Px(0),

equivalent to

view.Set(rui.Radius, NewRadiusProperty(rui.Params{
	rui.TopRightX: rui.Px(16),
	rui.TopRightY: rui.Px(8),
	rui.BottomLeftX: rui.Px(16),
	rui.BottomLeftY: rui.Px(8),
	rui.TopLeftX: rui.Px(0),
	rui.TopLeftX: rui.Px(0),
	rui.BottomRightX: rui.Px(0),
	rui.BottomRightY: rui.Px(0),

If all radii are the same, then the given SizeUnit value can be directly assigned to the "radius" property

view.Set(rui.Radius, rui.Px(4))

RadiusProperty has a textual representation of the following form:

_{  =  [/ ] [,  =  [/ ]] … }

where can take the following values: "x", "y", "top-left", "top-left-x", "top-left-y", "top-right","top-right-x", "top-right-y", "bottom-left", "bottom-left-x", "bottom-left-y", "bottom-right", "bottom-right-x", "bottom-right-y".

Values like " / " can only be assigned to the "top-left", "top-right", "bottom-left" and "bottom-right" properties.


_{ x = 4px, y = 4px, top-left = 8px, bottom-right = 8px }

equivalent to

_{ top-left = 8px, top-right = 4px, bottom-left = 4px, bottom-right = 8px }


_{ top-left = 8px / 8px, top-right = 4px / 4px, bottom-left = 4px / 4px, bottom-right = 8px / 8px }

or_{ top-left-x = 8px, top-left-y = 8px, top-right-x = 4px, top-right-y = 4px,
	bottom-left-x = 4px, bottom-left-y = 4px, bottom-right-x = 8px, bottom-right-y = 8px }

The RadiusProperty interface can be converted to a BoxRadius structure using the BoxRadius function.When converted, all text constants are replaced with real values. BoxRadius is described as

type BoxRadius struct {
	TopLeftX, TopLeftY, TopRightX, TopRightY, BottomLeftX, BottomLeftY, BottomRightX, BottomRightY SizeUnit

The BoxRadius structure can be passed as a parameter to the Set function by setting the value of the "radius" property.This converts BoxRadius to RadiusProperty. Therefore, when the property is read,the Get function will return the RadiusProperty interface, not the BoxRadius structure.You can get the BoxRadius structure without additional transformations using the global function

func GetRadius(view View, subviewID ...string) BoxRadius

You can also set individual radii using the Set function of the View interface.For this, the following properties are used

Property Constant Description
"radius-x" RadiusX All x-radii
"radius-y" RadiusY All y-radii
"radius-top-left-x" RadiusTopLeftX x-radius of the top left corner
"radius-top-left-y" RadiusTopLeftY y-radius of the top left corner
"radius-top-right-x" RadiusTopRightX x-radius of the top right corner
"radius-top-right-y" RadiusTopRightY y-radius of the top right corner
"radius-bottom-left-x" RadiusBottomLeftX x-radius of the bottom left corner
"radius-bottom-left-y" RadiusBottomLeftY y-radius of the bottom left corner
"radius-bottom-right-x" RadiusBottomRightX x-radius of the bottom right corner
"radius-bottom-right-y" RadiusBottomRightY y-radius of the bottom right corner
"radius-top-left" RadiusTopLeft top left corner radius
"radius-top-right" RadiusTopRight top right corner radius
"radius-bottom-left" RadiusBottomLeft bottom left corner radius
"radius-bottom-right" RadiusBottomRight bottom right corner radius


view.Set(rui.RadiusX, rui.Px(4))
view.Set(rui.RadiusY, rui.Px(32))

equivalent to

view.Set(rui.Border, NewRadiusProperty(rui.Params{
	rui.X: rui.Px(4),
	rui.Y: rui.Px(32),