Ordinal

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.

Was this page helpful?

Last updated: Nov 28, 2023