Object

Section

The component for organizing an article into sections.

Properties

role
string
(Required)

Always section for this component.

additions

An array of ComponentLink objects. This can be used to create a ComponentLink, allowing a link to anywhere in News. Adding a link to a section component will make the entire component interactable. Any links used in its child components are not interactable.

anchor

An object that defines vertical alignment with another component.

animation
*

An object that defines an animation to be applied to the component.

The none value is used for conditional design elements. Adding it here has no effect.

behavior
*

An object that defines behavior for a component, like Parallax or Springy.

The none value is used for conditional design elements. Adding it here has no effect.

components

An array of components to display as child components. Child components are positioned and rendered relative to their parent component.

conditional
*

An instance or array of section properties that can be applied conditionally, and the conditions that cause them to be applied.

contentDisplay
*

Defines how child components are positioned within this section component. For example, this property can allow for displaying child components side-by-side and can make sure they are sized equally.

The none value is used for conditional design elements. Adding it here has no effect.

On versions of News prior to iOS 11, child components are positioned as if contentDisplay were not defined.

hidden
boolean

A Boolean value that determines whether the component is hidden.

identifier
string

An optional unique identifier for this component. If used, this identifier must be unique across the entire document. You will need an identifier for your component if you want to anchor other components to it.

layout
*

An inline ComponentLayout object that contains layout information, or a string reference to a ComponentLayout object that is defined at the top level of the document.

If layout is not defined, size and position are based on various factors, such as the device type, the length of the content, and the role of this component.

scene

A set of animations applied to any header component that is a child of this section.

style
*

An inline ComponentStyle object that defines the appearance of this component, or a string reference to a ComponentStyle object that is defined at the top level of the document.

The none value is used for conditional design elements. Adding it here has no effect.

Discussion

A section is a full-width container component that lets you nest components so you can divide a large article into separate parts with potentially different styling. You can also use the section component to divide large chapters.

The section component is a structural component intended to organize an entire article, so you generally use it in the components array in the ArticleDocument properties. The overall height of a section is determined by the height of its child components.

Example

{ "components": [ { "role": "section", "components": [ { "role": "header", "style": { "fill": { "type": "image", "URL": "bundle://header.jpg", "fillMode": "cover", "verticalAlignment": "top", "horizontalAlignment": "center" } }, "layout": { "minimumHeight": "75cw" }, "components": [ { "role": "title", "text": "Article Title", "anchor": { "targetAnchorPosition": "center" }, "textStyle": { "textAlignment": "center" } } ] } ] } ]}

Relationships

Inherits From

See Also

Article Structure

Nesting Components in an Article

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

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 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.