Contents

CollectionDisplay

An object used in any container component type to define how the collection of child components is presented.

Declaration

object CollectionDisplay

Properties

NameTypeDescription
type Requiredstring

Always collection for this object.

alignmentstring

A string that defines how components are aligned within their rows. This is especially visible when distribution is set to narrow.

Valid values:

  • left (default). The group of components is left-aligned within the available space. Remaining space is added at the right of the row.

  • center. The group of components is centered within the available space. Remaining space is added at both sides of the row.

  • right. The group of components is right-aligned within the available space. Remaining space is added at the left of the row.

distributionstring

A string that defines how components should be distributed horizontally in a row.

Valid values:

  • wide (default). Components are spread across the full width of the component. Whitespace is equally distributed into the space between components.

  • narrow. Components are placed next to each other as closely as possible, separated by the width defined in the gutter property. Any remaining whitespace is applied to the left and right of the collection.

gutter(SupportedUnits | number)

A number in points or a string referring to a supported unit of measure defining the vertical gutter between components.

See Specifying Measurements for Components.

This value cannot be negative.

maximumWidth(SupportedUnits | number)

A number in points or a string referring to a supported unit of measure defining the maximum width of each child component inside the collection.

If the maximumWidth is smaller than the minimumWidth, the minimumWidth is used.

If no maximumWidth is provided, a default of 100cw is used.

See Specifying Measurements for Components.

minimumWidth(SupportedUnits | number)

A number in points or a string referring to a supported unit of measure defining the minimum width of each child component inside the collection.

minimumWidth should not exceed the maximumWidth value. A child component will never be larger than the width of its parent. If no minimumWidth has been provided, News attempts to decide the optimal size for each child component based on its contents. See Specifying Measurements for Components.

This value cannot be negative.

rowSpacing(SupportedUnits | number)

A number in points or a string referring to a supported unit of measure defining the horizontal spacing between rows. See Specifying Measurements for Components.

This value cannot be negative.

variableSizingboolean

A Boolean value that defines whether the components’ area is allowed to be sized differently per row.

If true, individual rows might have different widths for their components to make use of the entire available width.

If false, all components in the collection will have the same width.

widowsstring

A string that defines the approach to prevent the collection from having component widows.

Valid values:

  • equalize. Every row contains an equal amount of components. When provided with an uneven amount of components, each row consists of 1 component.

  • optimize (default). Looks for the most optimal distribution of components, but allows each row to have a different amount of components.

  • allow. Each row contains as many components as it can fit or are available. Allows for widows to occur.

Discussion

This image shows a CollectionDisplay with a distribution property of wide.

[Image]

This image shows a CollectionDisplay with a distribution property of narrow.

[Image]

This object can be used in Header, Container, Section, Chapter, Aside, and ArticleLink.

Example

{
  "components": [
    {
      "role": "container",
      "contentDisplay": {
        "type": "collection",
        "minimumWidth": 150,
        "gutter": "15",
        "rowSpacing": "30",
        "distribution": "wide"
      },
      "components": [
        {
          "role": "image",
          "URL": "bundle://gallery-02.jpg",
          "caption": "Coyotes are also seen in cities more often."
        },
        {
          "role": "image",
          "URL": "bundle://gallery-03.jpg",
          "explicitContent": true
        }
      ]
    }
  ]
}

See Also

Article Structure