APL Styled Properties

Styled properties are component properties that you can set in a style. This means that you can set a value for the property in a style defined in the styles section of your document, then use that style name when you place the component in your document.

• Example of setting styled properties
• Styled properties
• Map of style property to component

Example of setting styled properties

The color, textAlign, textAlignVertical, fontStyle, and fontSize properties are all styled properties. Therefore, you could define a style that sets these properties like this:

{
  "styles": {
    "captionText": {
      "values": [
        {
  "textAlign": "center",
  "textAlignVertical": "center",
  "color": "red",
  "fontStyle": "italic",
  "fontSize": "@fontSizeMedium"
        }
      ]
    }
  }
}

To use the style, assign its name captionText to the style property of the component. This sets the properties defined in captionText for the Text component:

{
  "type": "Text",
  "paddingLeft": "@spacingSmall",
  "paddingRight": "@spacingSmall",
  "text": "Image: ${imageCaption}",
  "style": "captionText"
}

The above code creates a red, italic text block with the text centered both horizontally and vertically.

Styled properties

Map of style property to component

The styled properties appear in the following components. Note that display and opacity are common properties of Component and are therefore available to all components.