APL Styled Properties (APL 1.5 and earlier)

(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

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

childHeight, childHeights

Dimension or array of dimension

The height of child items in a GridSequence.

GridSequence

childWidth, childWidths

Dimension or array of dimension

The width of child items in a GridSequence

GridSequence

color

Color

The color of the text.


  • EditText
  • Text

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

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

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

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

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

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

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

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"
}
Was this page helpful?

Last updated: Nov 28, 2023