Contents

ConditionalText

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

Declaration

object ConditionalText

Properties

NameTypeDescription
conditions Required(Condition | [Condition])

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

anchorAnchor

An object that defines vertical alignment with another component.

animation(ComponentAnimation | string("none"))

An object that defines an animation to apply to the component.

To remove a previously set condition, use none.

behavior(Behavior | string("none"))

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

To remove a previously set condition, use none.

hiddenboolean

A Boolean value that determines whether the component is hidden.

inlineTextStyles([InlineTextStyle] | string("none"))

An array of InlineTextStyle objects that you can use to apply different text styles to ranges of text. For each InlineTextStyle object, supply rangeStart and rangeLength values, and either a text style or the identifier of a text style that you define at the top level of the document.

Apple News ignores Inline text styles when the format is set to html or markdown.

To remove a previously set condition, use none.

layout(ComponentLayout | string)

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

If you don’t define layout, Apple News bases the size and position on various factors, such as the device type, the length of the content, and the role of this component.

style(ComponentStyle | string | string("none"))

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

To remove a previously set condition, use none.

textStyle(ComponentTextStyle | string)

An inline ComponentTextStyle object that contains styling information, or a string reference to a ComponentTextStyle object that you define at the top level of the document.

Discussion

Use the ConditionalText object to define an array of conditional text properties and the conditions under which to apply them. When a condition is met, the value of a property in ConditionalText overrides the value of the same property if you define it in the parent Text component. See Text.

Example

{
  "components": [
    {
      "role": "text",
      "textStyle": "exampleTextStyleSmall",
      "text": "Apple News Format allows publishers to craft beautiful editorial layouts. Galleries, audio, video, and fun interactions like animation make stories spring to life.",
      "conditional": [
        {
          "textStyle": "exampleTextStyleMedium",
          "conditions": [
            {
              "minViewportWidth": 415
            }
          ]
        },
        {
          "textStyle": "exampleTextStyleLarge",
          "conditions": [
            {
              "minViewportWidth": 769
            }
          ]
        }
      ]
    }
  ],
  "componentTextStyles": {
    "exampleTextStyleSmall": {
      "fontSize": 16
    },
    "exampleTextStyleMedium": {
      "fontSize": 24
    },
    "exampleTextStyleLarge": {
      "fontSize": 48
    }
  }
}

See Also

Conditional Design Elements