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, 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"
}