Ordinal

Note: Learn how to improve your skills with APL with Build visually rich experiences using APL at the Alexa Learning Lab.

The Alexa ordinal responsive component (AlexaOrdinal) displays the number of a list item. It is intended to be used to number list items in a component with multiple child components (such as a Sequence, Container, or Pager.

Compatibility

AlexaOrdinal is designed to work with all standard viewport profiles in the alexa-viewport-profiles package:

All hub round profiles
All hub landscape profiles
All hub portrait profiles
All mobile profiles
All TV profiles

If you use AlexaOrdinal on an unsupported viewport, you might have unexpected results. For details about viewport profiles, see Viewport Profiles.

Import the alexa-layouts package

To use AlexaOrdinal, import the alexa-layouts package.

The latest version of the alexa-layouts package is 1.7.0. AlexaOrdinal was introduced in version 1.1.0.

AlexaOrdinal parameters

All parameters except type are optional.

Name	Type	Default	Description	Widget support	Version added
`accessibilityLabel`	String	{ordinalText}	A string describing the ordinal. Voice over reads this string when the user selects this component.	Not supported	1.7.0
`entities`	Array	—	Array of entity data to bind to this component.	Not supported	1.2.0
`ordinalText`	String	—	Number to display. When using this component with a `Sequence`, leave this property unset to automatically number the items.	Not supported	1.1.0
`theme`	String	`dark`	Set the dark or light color theme. The selected theme controls the colors used for the component.	Not supported	1.1.0
`type`	String	—	Always set to `AlexaOrdinal`	Not supported	1.1.0

Display numbering

AlexaOrdinal uses the ordinal property in the data-binding context to display the list item numbers. This property is available for child components used within a component that can have multiple children:

To display the ordinal numbers, also set the numbered property on Container or Sequence to true. When numbered is false, AlexaOrdinal displays a circle without the number inside.

AlexaOrdinal example

The following example shows a Sequence that displays AlexaOrdinal next to a line of text.

Last updated: Apr 14, 2021