ConditionalDivider
The object for defining conditional properties for a divider component, and when the conditional properties are in effect.
Declaration
object ConditionalDividerProperties
| Name | Type | Description |
|---|---|---|
conditions Required | (Condition | [Condition]) | An instance or array of conditions that, when met, cause the conditional divider component properties to take effect. |
anchor | Anchor | An object that defines vertical alignment with another component. |
animation | (ComponentAnimation | string("none")) | An object that defines an animation to apply to the component. To remove a previously set condition, use none. |
behavior | (Behavior | string("none")) | An object that defines behavior for a component, like Parallax or Springy. To remove a previously set condition, use |
hidden | boolean | A Boolean value that determines whether the component is hidden. |
layout | (ComponentLayout | string) | An inline ComponentLayout object that contains layout information, or a string reference to a If you don’t define |
stroke | (StrokeStyle | string("none")) | An object that defines the color, width, and style of a divider. To remove a previously set condition, use |
style | (ComponentStyle | string | string("none")) | An inline ComponentStyle object that defines the appearance of this component, or a string reference to a To remove a previously set condition, use |
Discussion
Use the ConditionalDivider object to define an array of conditional divider properties and the conditions under which to apply them. When a condition is met, the value of a property in ConditionalDivider overrides the value of the same property if you define it in the parent Divider component. See Divider.
Example
{
"components": [
{
"role": "heading1",
"text": "Heading"
},
{
"role": "divider",
"stroke": {
"width": 3,
"color": "#D5B327"
},
"conditional": {
"stroke": {
"color": "#d5263e"
},
"conditions": {
"platform": "macos"
}
}
}
]
}