Object

ConditionalComponentLayout

The object for defining conditional properties for a component layout, and when the conditional properties are in effect.

Properties

conditions
*
(Required)

An instance or array of conditions that, when met, cause the conditional component layout properties to take effect.

columnSpan
integer

A number that indicates how many columns the component spans, based on the number of columns in the document.

By default, the component spans the entire width of the document or the width of its container component.

columnStart
integer

A number that indicates which column the component's start position is in, based on the number of columns in the document or parent container.

By default, the component starts in the first column (note that the first column is 0, not 1).

contentInset
*
Deprecated

A value that defines a content inset for the component. If applied, the inset is equivalent to half the document gutter. For example, if the article's layout sets the document gutter to 40pt, the content inset is 20 points.

The contentInset can be a boolean or contentInset object that defines the inset for each side separately. By default, no inset is applied.

Note: This property is deprecated. Use the padding property instead.

horizontalContentAlignment
string

The alignment of the content within the component. This property applies only when the width of the content is less than the width of the component.

This property is supported for Image, Logo, Divider, and MediumRectangleAdvertisement components. All other components ignore this property.

ignoreDocumentGutter
*

A value that indicates whether the gutters (if any) to the left and right of the component should be ignored. The gutter size is defined in the Layout object at the root level of the document.

Use this option to position two components next to each other without a gutter between them. This property applies only when a gutter actually exists to the left or right of the component. The first column does not have a left gutter, and the last column does not have a right gutter.

Valid values:

  • none (default). Gutters are not ignored.

  • left. Left gutter is ignored.

  • right. Right gutter is ignored.

  • both. Gutters on both sides (if any) are ignored.

You can also set this property to true to indicate that you want to ignore both gutters, or set it to false to ignore none of the gutters. By default, none of the gutters are ignored.

ignoreDocumentMargin
*

A value that indicates whether a document’s margins should be respected or ignored by the parent container. Ignoring document margins positions the component at the edge of the display. This property affects the layout only if the component is in the first or last column.

Valid values:

  • none (default). Margins are not ignored.

  • left. Left margin is ignored.

  • right. Right margin is ignored.

  • both. Margins on both sides (if any) are ignored.

Instead of specifying margins, you can set this property to true to indicate that both margins should be ignored, or set it to false to ignore none of the gutters. By default, none of the document margins are ignored.

margin
*

The margins for the top and bottom of the component, as a single integer that is applied to the top and bottom margins, or as an object containing separate properties for top and bottom.

maximumContentWidth
*

The maximum width of the content within the component. Specify this value as an integer in points, or use one of the available units of measure for components. See Specifying Measurements for Components.

This property is supported for Image, Logo, Divider, and MediumRectangleAdvertisement components. All other components ignore this property.

maximumWidth
*

The maximum width of the layout when used within a Container with HorizontalStackDisplay as the specified contentDisplay type.

minimumHeight
*

The minimum height of the component. A component is taller than its defined minimumHeight when the contents require it. Specify this value as an integer in points, or use one of the available units of measure for components. See Specifying Measurements for Components.

minimumWidth
*

The minimum width of the layout when used within a container with HorizontalStackDisplay as the specified contentDisplay type.

padding
*

The padding between the content of the component and the edges of the component.

ignoreViewportPadding
*

Discussion

Use the ConditionalComponentLayout object to define an array of conditional component layout properties and the conditions under which to apply them. When a condition is met, the value of a property in ConditionalComponentLayout overrides the value of the same property if defined in the parent ComponentLayout object. See ComponentLayout.

Example

{ "components": [ { "role": "photo", "URL": "bundle://summer.jpg", "layout": "exampleLayout", "caption": "Thanks to the record drought, mountain lions have begun to descend from the peaks." } ], "componentLayouts": { "exampleLayout": { "ignoreDocumentMargin": true, "conditional": [ { "ignoreDocumentMargin": false, "conditions": [ { "minViewportWidth": 415 } ] } ] } }}

Relationships

Inherits From

See Also

Conditional Design Elements

object Condition

The object for defining a condition that, when met, causes conditional properties to go into effect.

object ConditionalComponent

The object for defining conditional properties for a component, and when the conditional properties are in effect.

object ConditionalAutoPlacement

The object for defining conditional properties for an automatically placed component, and when the conditional properties are in effect.

object ConditionalSection

The object for defining conditional properties for a section component, and when the conditional properties are in effect.

object ConditionalDocumentStyle

The object for defining conditional properties for a document style, and when the conditional properties are in effect.

object ConditionalText

The object for defining conditional properties for a text component, and when the conditional properties are in effect.

object ConditionalTextStyle

The object for defining conditional properties for a text style, and when the conditional properties are in effect.

object ConditionalComponentTextStyle

The object for defining conditional properties for a component text style, and when the conditional properties are in effect.

object ConditionalComponentStyle

The object for defining conditional properties for a component style, and when the conditional properties are in effect.

object ConditionalContainer

The object for defining conditional properties for a container component, and when the conditional properties are in effect.

object ConditionalDivider

The object for defining conditional properties for a divider component, and when the conditional properties are in effect.