Contents

ComponentStyle

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

Declaration

object ComponentStyle

Properties

NameTypeDescription
conditional(ConditionalComponentStyle | [ConditionalComponentStyle])

An instance or array of component style properties that you apply conditionally, and the conditions that cause Apple News to apply them.

backgroundColor(Color | string("none"))

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

Use the none value for conditional design elements. Adding it here has no effect.

border(Border | string("none"))

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.

Use the none value for conditional design elements. Adding it here has no effect.

fill(Fill | string("none"))

A Fill object, such as an ImageFill, that you apply on top of the specified backgroundColor.

By default, Apple News doesn’t apply a Fill.

Use the none value for conditional design elements. Adding it here has no effect.

mask(CornerMask | string("none"))

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

Use the none value for conditional design elements. Adding it here has no effect.

opacitynumber

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 the subcomponents. See Nesting Components in an Article.

tableStyle(TableStyle | string("none"))

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

Use the none value for conditional design elements. Adding it here has no effect.

shadowComponentShadow

The object that defines a component shadow.

Mentioned in

Discussion

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

You can use this object 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

Related Documentation

Component Style Basics