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.2.0
. AlexaOrdinal
was introduced in version 1.1.0
.
AlexaOrdinal parameters
All parameters except type
are optional.
Name | Type | Default | Description | Version added/updated |
---|---|---|---|---|
|
Array |
[] |
Array of entity data to bind to this component. |
1.2.0 |
|
String |
Number to display. When using this component with a |
1.1.0 |
|
|
String |
dark |
Set the dark or light color theme. The selected theme controls the colors used for the component. |
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"
}
]
}
}