Object

CornerMask

The object for creating rounded corners.

Properties

bottomLeft

boolean

A Boolean that indicates whether the bottom-left corner should be masked.

Default: true

bottomRight

boolean

A Boolean that indicates whether the bottom-right corner should be masked.

Default: true

curve

string

The type of curve to use for rendering the mask’s corner.

Valid values:

circular. Creates a rounded corner.
continuous. Creates a continuous corner.

Default: circular

Possible values: circular, continuous

radius

A supported unit or number that describes the radius of the corners in points. Corner radius cannot exceed half the component width or height, whichever is smaller.

Possible types: SupportedUnits, number

Possible types: SupportedUnits, integer

topLeft

boolean

A Boolean that indicates whether the top-left corner should be masked.

Default: true

topRight

boolean

A Boolean that indicates whether the top-right corner should be masked.

Default: true

type

string

The type of mask. The value is always corners.

Value: corners

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.

This object can be used 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      }    }  }}

CornerMask

Properties

Discussion

Example

See Also

Component Style Basics