Object

ComponentStyle

The object for setting style properties for components, including background color and fill, borders, and table styles.

Properties

conditional
*

An instance or array of component style properties that are applied conditionally, and the conditions that cause them to be applied.

backgroundColor
*

The component's background color. The value defaults to transparent.

The none value is used for conditional design elements. Adding it here has no effect.

border
*

The border for the component. Because the border is drawn inside the component, it affects the size of the content within the component. The bigger the border, the less available space for content.

The none value is used for conditional design elements. Adding it here has no effect.

fill
*

A Fill object, such as an ImageFill, that will be applied on top of the specified backgroundColor.

By default, no fill is applied.

The none value is used for conditional design elements. Adding it here has no effect.

mask
*

The object that defines a mask that clips the contents of the component to the specified masking behavior.

The none value is used for conditional design elements. Adding it here has no effect.

opacity
number

The opacity of the component, set as a float value between 0 (completely transparent) and 1 (completely opaque). The effects of the component’s opacity are inherited by any child components. See Nesting Components in an Article.

tableStyle
*

The styling for the rows, columns, and cells of the component, if it is a DataTable or HTMLTable component.

The none value is used for conditional design elements. Adding it here has no effect.

The object that defines a component shadow.

Discussion

Use the ComponentStyle object to define the visual appearance of a component, including its background color, fill, opacity, borders, and table style.

This object can be used in Component and ArticleDocument.componentStyles.

Example

{ "components": [ { "role": "container", "style": "exampleComponentStyle", "components": [ { "role": "title", "text": "Drought" } ] } ], "componentStyles": { "exampleComponentStyle": { "backgroundColor": "#FFFFFF", "opacity": 1, "border": { "all": { "width": 1, "color": "#333" }, "left": false, "right": false } } }}

See Also

Component Style Basics

Defining a Component Style

Set style options for the components in your article.

object CornerMask

The object for creating rounded corners.

object Border

The object for setting borders for component sides or tables.

object StrokeStyle

The object for defining the color, width, and style of a border or divider.