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 |