The component for defining the top area of an article, chapter, or section.
Technology
- Apple News Format 1.7+
Properties
role
string
Always header
for this component.
additions
An array of additions. This can be used to create a ComponentLink, allowing links to anywhere in News.
Adding a link to a Container component makes the entire component tappable. Any links used in its child components are not tappable.
anchor
An object that defines vertical alignment with another component.
animation
*
A 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
*
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 container properties that can be applied conditionally, and the conditions that cause them to be applied.
content Display
*
An object that defines how to position child components within this container component. A HorizontalStackDisplay, for example, allows for displaying child components side by side.
On versions of News prior to iOS 11, child components are positioned as if content
were not defined.
The none
value is used for conditional design elements. Adding it here has no effect.
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. See Anchor.
layout
*
An inline Component
object that contains layout information, or a string reference to a Component
object that is defined at the top level of the document.
If layout
is not defined, size and position are be based on various factors, such as the device type, the length of the content, and the role
of this component.
style
*
An inline Component
object that defines the appearance of this component, or a string reference to a Component
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 header is a structural component used to define the top area of an article or the top part of a Section or Chapter component. A header can contain child components—such as a Title or Heading—and is often used to layer titles and headings over a background image. (You specify the image in the style
property with an ImageFill style.) The minimum size of a header component is determined by the size of its child components.
Example
{
"components": [
{
"role": "header",
"components": [
{
"role": "title",
"text": "Article Title",
"style": {
"fill": {
"type": "image",
"URL": "bundle://header.jpg",
"fillMode": "cover",
"verticalAlignment": "top",
"horizontalAlignment": "center"
}
}
}
]
}
]
}