ConditionalComponentStyle
The object for defining conditional properties for a component style, and when the conditional properties are in effect.
Declaration
object ConditionalComponentStyleProperties
| Name | Type | Description |
|---|---|---|
conditions Required | (Condition | [Condition]) | An instance or array of conditions that, when met, cause the conditional component style properties to take effect. |
backgroundColor | (Color | string("none")) | The component’s background color. This value defaults to transparent. To remove a previously set condition, use |
border | (Border | string("none")) | The border for the component. Because the border is inside the component, it affects the size of the content within the component. The bigger the border, the less available space for content. To remove a previously set condition, use |
fill | (Fill | string("none")) | A fill object, such as an ImageFill, that Apple News applies on top of the specified By default, Apply News doesn’t apply any fill. To remove a previously set condition, use |
mask | (CornerMask | string("none")) | A mask that clips the contents of the component to the specified masking behavior. To remove a previously set condition, use |
opacity | number | The opacity of the component, set as a |
tableStyle | (TableStyle | string("none")) | The styling for the rows, columns, and cells of the component, if it’s a DataTable or HTMLTable component. To remove a previously set condition, use |
shadow | ComponentShadow | The object for creating a component shadow. |
Mentioned in
Discussion
Use the ConditionalComponentStyle object to define an array of conditional component style properties and the conditions under which to apply them. When a condition is met, the value of a property in ConditionalComponentStyle overrides the value of the same property if you define it in the parent ComponentStyle object. See ComponentStyle.
Example
{
"components": [
{
"role": "body",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"style": "exampleStyle"
}
],
"componentStyles": {
"exampleStyle": {
"backgroundColor": "#e3e3e3",
"conditional": [
{
"backgroundColor": "goldenrod",
"conditions": [
{
"verticalSizeClass": "compact"
}
]
}
]
}
}
}