APL Styled Properties

Note: Submit your skill and see it come to life.

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, and then assign the style name to the style property of a component in your document.

Styled properties

Property	Type	Description	Applies to components
`action`, `actions`	Array of actions	Programmatic equivalents for complex touch interactions	All components
`align`	Alignment	Alignment of the image within the containing box.	• `Image` • `VectorGraphic`
`alignItems`	One of: `stretch`, `center`, `start`, `end`, `baseline`	Alignment for children in the cross-axis.	`Container`
`backgroundColor`	Color	Background color.	`Frame`
`borderBottomLeftRadius`	Absolute Dimension	Radius of the bottom-left corner. Overrides `borderRadius`.	`Frame`
`borderBottomRightRadius`	Absolute Dimension	Radius of the bottom-right corner. Overrides `borderRadius`.	`Frame`
`borderColor`	Color	Color of the border.	• `EditText` • `Frame`
`borderRadius`	Absolute Dimension	Corner radius for rounded-rectangle variant.	• `Frame` • `Image`
`borderStrokeWidth`	Non-negative Absolute Dimension	Width of the border stroke around the text box.	• `EditText` • `Frame`
`borderTopLeftRadius`	Absolute Dimension	Radius of the top-left corner. Overrides `borderRadius` if specified.	`Frame`
`borderTopRightRadius`	Absolute Dimension	Radius of the top-right corner. Overrides `borderRadius` if specified.	`Frame`
`borderWidth`	Number	Width of the border.	• `EditText` • `Frame`
`color`	Color	The color of the text.	• `EditText` • `Text`
`direction`	One of: `column`, `row`, `columnReverse`, `rowReverse`	Direction in which to display the child components.	`Container`
`display`	String (`invisible`, `none`, `normal`)	Determines whether the component displays on the screen.	All components
`fontFamily`	String	Font family (such as "Amazon Ember Display").	• `EditText` • `Text`
`fontSize`	Absolute Dimension	The size of the text.	• `EditText` • `Text`
`fontStyle`	`normal`, `italic`	The font style to display.	• `EditText` • `Text`
`fontWeight`	`normal`, `bold`, 100, 200, 300, 400, 500, 600, 700, 800, 900	The font weight to display.	• `EditText` • `Text`
`height`	Positive Dimension	The requested height of the component.	All components
`highlightColor`	Color	The highlight color to show behind selected text.	`EditText`
`hint`	String	Hint text to display when no text has been entered. Not shown when the `text` property contains a value.	`EditText`
`hintColor`	Color	The color of the hint text.	`EditText`
`hintStyle`	normal, italic	The style of the hint font	`EditText`
`hintWeight`	normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900	The weight of the hint font	`EditText`
`justifyContent`	One of: `start`, `end`, `center`, `spaceBetween`, `spaceAround`	How to distribute free space when there is room on the main axis. Defaults to `start`.	`Container`
`keyboardType`	KeyboardType	The type of keyboard to display when the user selects the component.	`EditText`
`letterSpacing`	Absolute Dimension	Additional space to add between letters.	`Text`
`lineHeight`	Number (percentage)	Line-height multiplier.	`Text`
`maxHeight`	Positive Dimension	The maximum allowed height of this component.	All components
`maxWidth`	Positive Dimension	The maximum allowed width of this component.	All components
`maxLength`	Non-negative integer	The maximum number of characters the user can enter in the edit box.	`EditText`
`maxLines`	Integer	The maximum number of lines of text to display. When the text can't fit within the provided number of lines, the component truncates the content with an ellipsis.	`Text`
`minHeight`	Non-negative Dimension	The minimum allowed height of this component.	All components
`minWidth`	Non-negative Dimension	The minimum allowed width of this component.	All components
`opacity`	Number	Opacity of this component and children.	All components
`overlayColor`	Color	If set, a theme-appropriate scrim is overlaid on the image. This ensures text placed on the image is legible.	`Image`
`overlayGradient`	Gradient	A colored gradient that overlays the image.	`Image`
`padding`	Array of non-negative Absolute Dimension	Space to add on the sides of the component	All components
`paddingBottom`	Non-negative Absolute Dimension	Space to add to the bottom of this component.	All components
`paddingLeft`	Non-negative Absolute Dimension	Space to add to the left of this component.	All components
`paddingRight`	Non-negative Absolute Dimension	Space to add to the right of this component.	All components
`paddingTop`	Non-negative Absolute Dimension	Space to add to the top of this component.	All components
`role`	String	Role or purpose of the component	All components
`scale`	Scale	Method used to resize the image or vector graphic to fit in the bounding box.	• `Image` • `VectorGraphic`
`secureInput`	Boolean	Hide characters as they are typed if true.	`EditText`
`selectOnFocus`	Boolean	When true, select the text when the `EditText` component gets the focus.\|	`EditText`
`shadowColor`	Color	Shadow color	All components
`shadowHorizontalOffset`	Absolute Dimension	Horizontal offset of the shadow	All components
`shadowRadius`	Non-negative Absolute Dimension	Shadow blur radius	All components
`shadowVerticalOffset`	Absolute Dimension	Vertical offset of the shadow	All components
`size`	Positive integer	Specifies approximately the number of characters to display.	`EditText`
`snap`	One of: `none`, `start`, `center`, `end`, `forceStart`, `forceCenter`, `forceEnd`	The alignment that the child components snap to when scrolling stops.	• `GridSequence` • `Sequence`
`submitKeyType`	SubmitKeyType	The type of the return key. The specified key sends an `onSubmit` event.	`EditText`
`textAlign`	`auto`, `left`, `right`, `center`	Alignment of text within a paragraph.	`Text`
`textAlignVertical`	`auto`, `top`, `bottom`, `center`	Vertical alignment of text.	`Text`
`validCharacters`	String	Restrict the characters that can be entered	`EditText`
`width`	Positive Dimension	The requested width of this component.	All components
`wrap`	One of: `noWrap`, `wrap`, `wrapReverse`	Determines how to wrap child components to multiple lines.	`Container`

Example of setting styled properties

The following example shows a style called captionText that sets five properties:

color
textAlign
textAlignVertical
fontStyle
fontSize

{
  "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. The following example sets the five properties defined in captionText for the Text component. This code creates a red, italic text block with the text centered both horizontally and vertically.

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

APL Styled Properties

Styled properties

Example of setting styled properties

Related topics