Text List Item
The Alexa text list item responsive component (AlexaTextListItem
) displays text, formatted to display within a list.
Compatibility
AlexaTextListItem
is designed to work with the following viewport profiles:
- The following widget viewport profiles in the
alexa-viewport-profiles
package:- Widget Medium (
@hubWidgetMedium
)
- Widget Medium (
- 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
For details about viewport profiles, see Viewport Profiles.
Differences for widgets
When used within a widget, AlexaTextListItem
displays a simplified list item to accommodate the small widget size.
- List items display primary and secondary text and image thumbnails. List items don't display tertiary text, ratings, or item numbers.
- You can't change the positioning of the secondary text in the list items.
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
The following table shows the parameters you can set on AlexaTextListItem
. Unless otherwise noted, standard viewport profiles support all parameters. The "Widget support" column indicates the widget viewport profiles that support each parameter. For details about viewport profiles, see Viewport Profiles.
All parameters except type
are optional.
Name | Type | Default | Description | Widget support | Version added |
---|---|---|---|---|---|
|
String |
|
A string describing the text list item. Voice over reads this string when the user selects the item. |
Medium |
1.5.0 |
|
Component |
— |
An interactive responsive component to display at the end of the list item. Preferred options are |
Not supported |
1.7.0 |
|
Any |
|
The graphic to display to represent an 'empty' rating slot (such as an empty star). Used when |
Not supported |
1.2.0 |
|
Array |
— |
Array of entity data to bind to this component. |
Medium |
1.2.0 |
|
Any |
|
The graphic to display to represent a 'full' rating slot (such as a full star). Used when |
Not supported |
1.2.0 |
|
Any |
|
The graphic to display to represent a 'half' rating slot (such as a half star). Used when |
Not supported |
1.2.0 |
|
Boolean |
|
When |
Medium |
1.1.0 |
|
Boolean |
|
When |
Not supported |
1.2.0 |
|
Boolean |
|
When |
Not supported |
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 |
Medium |
1.2.0 |
|
Boolean |
|
When |
Medium |
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 |
Medium |
1.2.0 |
|
Boolean |
|
When |
Medium |
1.3.0 |
|
String |
— |
URI for an image to display next to the list item as a thumbnail. |
Medium |
1.2.0 |
|
String |
|
Specifies the layout direction for the content. Set this property to either |
Medium |
1.4.0 |
|
— |
The action to trigger when the user selects the list item. When not provided, the list item displays with a |
Medium |
1.1.0 | |
|
String |
— |
Primary text to display for the list item. |
Medium |
1.1.0 |
|
String |
|
The type of graphic to use for the rating. Set to |
Not supported |
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. |
Not supported |
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 |
Not supported |
1.2.0 |
|
String |
— |
Text to display next to the rating. Ignored when |
Not supported |
1.2.0 |
|
String |
— |
Secondary text for each list item. |
Medium |
1.2.0 |
|
String |
|
The position to display the |
Not supported |
1.2.0 |
|
Any |
— |
The graphic to display to represent the rating. Used when |
Not supported |
1.2.0 |
|
— |
The width of the bounding box for the single graphic that represents the rating. Used when |
Not supported |
1.2.0 | |
|
String |
— |
Tertiary text for each list item. |
Not supported |
1.2.0 |
|
String |
|
The position to display the |
Not supported |
1.2.0 |
|
Boolean |
|
When |
Not supported |
1.4.0 |
|
String |
|
Set the dark or light color theme. The selected theme controls the colors used for the component. |
Medium |
1.1.0 |
|
Boolean |
|
When |
Medium |
1.2.0 |
|
String |
— |
Always set to |
Medium |
1.1.0 |
Text wrapping for a list item (maxLines)
The AlexaTextListItem
component determines how many lines to show for the primaryText
and secondaryText
properties based on the viewport profile, image ratio, and contents of the item. For example, a larger viewport profile might show up to four lines for the primaryText
, but a widget viewport shows three lines of text.
You can't change this setting.
AlexaTextListItem examples
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. Because this example doesn't set primaryAction
, the list item displays as disabled
.
The following example shows an AlexaTextListItem
in a widget with primaryText
and secondaryText
.
For an example of using AlexaTextListItem
in a list, see AlexaTextList.
Related topics
Last updated: Dec 06, 2023