APL Styled Properties (APL 1.6 to 2023.2)

---

(This is not the most recent version of APL. Use the Other Versions option to see the documentation for the most recent version of APL)

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

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.

Related topics

• APL Style Definition and Evaluation
• Base Component Properties

---

---

Last updated: Nov 28, 2023