CornerMask
The object for creating rounded corners.
Declaration
object CornerMaskProperties
| Name | Type | Description |
|---|---|---|
bottomLeft | boolean | A Boolean that indicates whether the bottom-left corner is masked. |
bottomRight | boolean | A Boolean that indicates whether the bottom-right corner is masked. |
curve | string | The type of curve to use for rendering the mask’s corner. Valid values:
|
radius | (SupportedUnits | number) | A supported unit or number that describes the radius of the corners in points. Corner radius can’t exceed half the component width or height, whichever is smaller. |
topLeft | boolean | A Boolean that indicates whether the top-left corner is masked. |
topRight | boolean | A Boolean that indicates whether the top-right corner is masked. |
type | string | The type of mask. The value is always |
Discussion
Use the CornerMask object to specify the corner radius for a component, and enable or disable the effect on a per-corner basis (topRight, topLeft, bottomRight, and bottomLeft). All corners are enabled by default. When you specify a border alongside a corner radius, the borders take into account the radius of the mask and are drawn within the unmasked area of the component.
You can use this object in ComponentStyle.
Example
{
"components": [
{
"role": "container",
"style": "exampleComponentStyle",
"components": [
{
"role": "title",
"text": "Drought"
}
]
}
],
"componentStyles": {
"exampleComponentStyle": {
"backgroundColor": "#FF0000",
"mask": {
"type": "corners",
"radius": 25,
"topRight": false,
"bottomRight": false
}
}
}
}