ConditionalTextStyle
The object for defining conditional properties for a text style, and when the conditional properties are in effect.
Declaration
object ConditionalTextStyleProperties
| Name | Type | Description |
|---|---|---|
conditions Required | (Condition | [Condition]) | An instance or array of conditions that, when met, cause the conditional text style properties to take effect. |
backgroundColor | (Color | string("none")) | The background color for text lines. This value defaults to transparent. To remove a previously set condition, use |
fontFamily | (string | string("system")) | The font family to use for text rendering; for example, In iOS 13, iPadOS 13, and macOS 10.15 and later, you can use the value |
fontName | string | The font name to use to refer to an explicit font variant’s PostScript name, such as |
fontSize | integer | The size of the font, in points. By default, the font size is inherited from a parent component or a default style. As a best practice, try not to go below 16 points for body text. Apple News may automatically resize the |
fontStyle | string | The font style to apply for the selected font. Valid values:
|
fontWeight | (integer | string) | The font weight to apply for the selected font. In addition to explicit weights (named or numerical), If Apple News can’t find a font variant with the given specifications in the provided font family, it selects an alternative with the closest match. If Apple News doesn’t find a bold/bolder font, it doesn’t create a faux-bold alternative, and instead uses the closest match. Similarly, if Apple News can’t find an italic or oblique font variant, it won’t slant text or make it appear italicized. Valid values:
|
fontWidth | string | The font width for the selected font (known in CSS as font-stretch). This value defines the width characteristics of a font variant between normal, condensed, and expanded. Some font families are categorized by width (for example, Valid values:
|
orderedListItems | (ListItemStyle | string("none")) | An object for use with text components with HTML markup. You can create text styles containing an To remove a previously set condition, use |
strikethrough | (TextDecoration | boolean) | The text strikethrough. Set |
stroke | (TextStrokeStyle | string("none")) | The stroke style for the text outline. By default, Apple News omits To remove a previously set condition, use |
textColor | Color | The text color. |
textShadow | (TextShadow | string("none")) | The text shadow for this style. To remove a previously set condition, use |
textTransform | string | The transform to apply to the text. Valid values:
|
tracking | number | The amount of tracking (spacing between characters) in text, as a percentage of the font size. The actual spacing between letters is determined by combining information from the font and font size. Example: Set tracking to |
underline | (TextDecoration | boolean) | The text underlining. You can use this style for links. Set underline to |
unorderedListItems | (ListItemStyle | string("none")) | An object for use with text components with HTML markup. You can create text styles containing an To remove a previously set condition, use none. |
verticalAlignment | string | The vertical alignment of the text. You can use this property for superscripts and subscripts. Overrides values specified in parent text styles. Default value: The values |
Mentioned in
Discussion
Use the ConditionalTextStyle object to define an array of conditional text style properties and the conditions under which to apply them. When a condition is met, the value of a property in ConditionalTextStyle overrides the value of the same property if defined in the parent TextStyle object. See TextStyle.
Example
{
"components": [
{
"role": "body",
"text": "Lorem ipsum dolor sit amet, <span data-anf-textstyle='exampleTextStyle'>consectetur adipiscing elit.</span>",
"format": "html"
}
],
"textStyles": {
"exampleTextStyle": {
"textColor": "#FF0000",
"conditional": [
{
"underline": true,
"textColor": "#000",
"conditions": [
{
"minContentSizeCategory": "XXXL"
}
]
}
]
}
}
}