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

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

Property Type Description
align Alignment Alignment of the image within the containing box.
backgroundColor Color Background color.
borderBottomLeftRadius Absolute Dimension Radius of the bottom-left corner. Overrides borderRadius.
borderBottomRightRadius Absolute Dimension Radius of the bottom-right corner. Overrides borderRadius.
borderColor Color Color of the border.
borderRadius Absolute Dimension Corner radius for rounded-rectangle variant.
borderTopLeftRadius Absolute Dimension Radius of the top-left corner. Overrides borderRadius if specified.
borderTopRightRadius Absolute Dimension Radius of the top-right corner. Overrides borderRadius if specified.
borderWidth Number Width of the border.
color Color The color of the text.
display String (invisible, none, normal) Determines whether the component is displayed on the screen.
fontFamily String Font family (such as "Amazon Ember Display").
fontSize Absolute Dimension The size of the text.
fontStyle normal, italic The font style to display.
fontWeight normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900 The font weight to display.
letterSpacing Absolute Dimension Additional space to add between letters.
lineHeight Number (percentage) Line-height multiplier.
maxLines Integer The maximum number of lines of text to display. The text will be truncated with an ellipsis if not all text is visible.
opacity Number Opacity of this component and children.
overlayColor Color If set, a theme-appropriate scrim is overlaid on the image. This ensures text placed on the image is legible.
overlayGradient Gradient A colored gradient that overlays the image.
textAlign auto, left, right, center Alignment of text within a paragraph.
textAlignVertical auto, top, bottom, center Vertical alignment of text.

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.

Property Image Text Frame VectorGraphic
align X     X
backgroundColor     X  
borderBottomLeftRadius     X  
borderBottomRightRadius     X  
borderColor     X  
borderRadius X   X  
borderTopLeftRadius     X  
borderTopRightRadius     X  
borderWidth     X  
color   X    
display   X    
fontFamily   X    
fontSize   X    
fontStyle   X    
fontWeight   X    
letterSpacing   X    
lineHeight   X    
maxLines   X    
opacity        
overlayColor X      
overlayGradient X      
textAlign   X    
textAlignVertical   X    
Amazon Alexa
Amazon Appstore
Amazon Web Services
Amazon Dash Replenishment