Text List Item (1.4.0 - 1.5.0)
(This is not the most recent version of AlexaTextListItem
. Use the Other Versions option to see the documentation for the most recent version of AlexaTextListItem
)
The Alexa text list item responsive component (AlexaTextListItem
) displays text, formatted to display within a list.
Import the alexa-layouts package
To use AlexaTextListItem
, import the alexa-layouts package.
The latest version of the alexa-layouts
package is 1.7.0. AlexaTextListItem
was introduced in version 1.1.0.
Use the Other Versions option at the top of this page to see documentation for different versions of AlexaTextListItem
. The table of parameters notes the version of alexa-layouts
in which each parameter was added.
AlexaTextListItem parameters
All parameters except type
are optional.
Name | Type | Default | Description | Version added |
---|---|---|---|---|
|
String |
|
A string describing the text list item. Voice over reads this string when the user selects the item. |
1.5.0 |
|
Any |
|
The graphic to display to represent an 'empty' rating slot (such as an empty star). Used when |
1.2.0 |
|
Array |
— |
Array of entity data to bind to this component. |
1.2.0 |
|
Any |
|
The graphic to display to represent a 'full' rating slot (such as a full star). Used when |
1.2.0 |
|
Any |
|
The graphic to display to represent a 'half' rating slot (such as a half star). Used when |
1.2.0 |
|
Boolean |
|
When |
1.1.0 |
|
Boolean |
|
When |
1.2.0 |
|
Boolean |
|
When |
1.1.0 |
|
String |
|
Determines how to position the image within the bounding box. Used when the image is smaller than the bounding box. Options are bottom, bottom-left, bottom-right, center, left, right, top, top-left, top-right. This property works the same as the |
1.2.0 |
|
Boolean |
|
When |
1.2.0 |
|
String |
|
Determines how to scale the image to fit within the bounding box. Options are none, fill, best-fit, best-fill, best-fit-down. This property works the same as the |
1.2.0 |
|
Boolean |
|
When |
1.3.0 |
|
String |
— |
URI for an image to display next to the list item as a thumbnail. |
1.2.0 |
|
String |
|
Specifies the layout direction for the content. Set this property to either |
1.4.0 |
|
— |
The action to trigger when the user selects the list item. |
1.1.0 | |
|
String |
— |
Primary text to display for the list item. |
1.1.0 |
|
String |
|
The type of graphic to use for the rating. Set to |
1.2.0 |
|
Number |
-1 |
A numeric rating between 0 and 5. When set to a positive number, displays the number as a star rating. Set to a negative number or omit to leave off the rating. |
1.2.0 |
|
String |
— |
Determines whether to display a single graphical asset for the rating, or build the rating from multiple image assets. When set to |
1.2.0 |
|
String |
— |
Text to display next to the rating. Ignored when |
1.2.0 |
|
String |
— |
Secondary text for each list item. |
1.2.0 |
|
String |
|
The position to display the |
1.2.0 |
|
Any |
— |
The graphic to display to represent the rating. Used when |
1.2.0 |
|
— |
The width of the bounding box for the single graphic that represents the rating. Used when |
1.2.0 | |
|
String |
— |
Tertiary text for each list item. |
1.2.0 |
|
String |
|
The position to display the |
1.2.0 |
|
Boolean |
|
When |
1.4.0 |
|
String |
|
Set the dark or light color theme. The selected theme controls the colors used for the component. |
1.1.0 |
|
Boolean |
|
When |
1.2.0 |
|
String |
— |
Always set to |
1.1.0 |
AlexaTextListItem example
The following example shows an AlexaTextListItem
with primaryText
, secondaryText
, and tertiaryText
.
The following example shows an AlexaTextListItem
with a thumbnail graphic and a rating. Note that both the secondaryText
and tertiaryText
display on the bottom.
For an example of using AlexaTextListItem
in a list, see AlexaTextList.
Related topics
Last updated: Nov 28, 2023