Article

Nesting Components in an Article

Use container components to create the component hierarchies you need for special article designs.

Overview

A nested component is a child of the parent component that contains it. The child component is positioned and rendered relative to that parent. The minimum size of a container component is determined by the size of its child components.

Many design and layout effects require you to use hierarchies of nested components. For example, you can create a layering effect by nesting content (such as a title) inside a parent component that has a background Fill. Any content displayed by the parent—as well as any content from its child components—is layered in front of the parent’s background fill, as shown in this example.

Apple News Format has several container components that allow you to nest other components within them:

Chapter

Header

Section

Container

The Aside component also lets you nest other components, but generally contains content that is not directly related to your article.

The following example shows a section component with two child components (title and photo) defined in its components array.

{
  "role": "section",
  "components": [
  {
     "role": "title",
     "text": "A Photo",
   },
  {
     "role": "photo",
     "URL": "bundle://.",
     }
    ]
}

All container components have a components property whose value is an array of components. In this array, the order of the components is the order in which they appear in your article.

See Also

Article Structure

Adding a Scene to a Chapter or a Section Header

Add a scene to your article to create special effects.

Creating an Article Link

Link to an article by using the article-linking container component.

Displaying Components Side By Side

Configure a side-by-side, horizontal arrangement of components for your article.

object Header

The component for defining the top area of an article, chapter, or section.

object Container

Properties shared by all container types.

object Section

The component for organizing an article into sections.

object Chapter

The component for organizing an article into chapters.

object Aside

The component for setting apart content that is not directly related to the article, such as promotional content.

object CollectionDisplay

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

object HorizontalStackDisplay

The object for displaying components side by side in a Container component.

object FlexibleSpacer

The component for redistributing empty space inside a horizontal stack collection.

object Divider

The component for defining a horizontal line to visually divide parts of your article.

object ArticleLink

The container component for creating a link to an article.

object ArticleTitle

The component for displaying an article title in the ArticleLink component.

object ArticleThumbnail

The component for displaying a thumbnail image with an article link.