Gracias por tu visita. Esta página solo está disponible en inglés.

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.

Import the alexa-layouts package

To use AlexaOrdinal, import the alexa-layouts package.

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

AlexaOrdinal parameters

All parameters except type are optional.

Name Type Default Description Version added

ordinalText

String

Number to display. When using this component with a Sequence, leave this property unset to automatically number the items.

1.1.0

theme

String

dark

Colors will be switched depending on the specified theme (light/dark). Default to dark theme

1.1.0

type

String

None

Always set to AlexaOrdinal

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

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

{
  "type": "Sequence",
  "id": "textList",
  "numbered": true,
  "height": "100vh",
  "width": "100vw",
  "data": [
    "This is the first item",
    "This is the second item",
    "This is the third item"
  ],
  "item": {
    "type": "Container",
    "direction": "row",
    "inheritParentState": true,
    "paddingLeft": "@spacingMedium",
    "paddingTop": "@spacingMedium",
    "items": [
      {
        "theme": "dark",
        "type": "AlexaOrdinal"
      },
      {
        "type": "Text",
        "text": "${data}",
        "textAlign": "center",
        "paddingLeft": "@spacingMedium"
      }
    ]
  }
}