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
- AlexaOrdinal parameters
- Display numbering
- AlexaOrdinal example
- Related topics
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 |
|---|---|---|---|---|
|
|
String |
Number to display. When using this component with a |
1.1.0 |
|
|
|
String |
dark |
Colors will be switched depending on the specified theme (light/dark). Default to dark theme |
1.1.0 |
|
|
String |
None |
Always set to |
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"
}
]
}
}
