Rating

The Alexa rating responsive component (AlexaRating) displays a non-interactive graphic to communicate a rating for an item. You can use a default star image or provide your own custom assets for the graphic.

Import the alexa-layouts package

To use AlexaRating, import the alexa-layouts package.

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

AlexaRating parameters

All parameters except type are optional.

Name Type Default Description Version added/updated

accessibilityLabel

String

"[ratingNumber] out of five stars from [ratingText]"

A string describing the rating. Voice over reads this string when the user selects the item.

1.4.0

emptyRatingGraphic

any

empty

The graphic to display to represent an 'empty' rating slot (such as an empty star). Used when ratingSlotMode is multiple. You can provide either a reference to an AVG or the URL of an image. When ratingGraphicType is AVG, set this property to the name of the graphic as defined in the graphics property or in an imported package. When ratingGraphicType is image, provide the URL of the image to display.

1.1.0

entities

Array

[]

Array of entity data to bind to this template.

1.2.0

fullRatingGraphic

any

full

The graphic to display to represent a 'full' rating slot (such as a full star). Used when ratingSlotMode is multiple. You can provide either a reference to an AVG or the URL of an image. When ratingGraphicType is AVG, set this property to the name of the graphic as defined in the graphics property or in an imported package. When ratingGraphicType is image, provide the URL of the image to display.

1.1.0

halfRatingGraphic

any

half

The graphic to display to represent a 'half' rating slot (such as a half star). Used when ratingSlotMode is multiple. You can provide either a reference to an AVG or the URL of an image. When ratingGraphicType is AVG, set this property to the name of the graphic as defined in the graphics property or in an imported package. When ratingGraphicType is image, provide the URL of the image to display.

1.1.0

layoutDirection

String

${environment.layoutDirection}

Specifies the layout direction for the progress bar. Set this property to either LTR (left-to-right) or RTL (right-to-left). This property doesn't inherit the layoutDirection from the component's parent container. Therefore, explicitly set this property when needed.

For more about support for right-to-left languages in the responsive components, see Support for Right-to-left Languages.

1.4.0

ratingGraphicType

String

AVG

The type of graphic to use for the rating. Set to AVG or image. When set to image, provide a URL for the image to use in the relevant graphic properties. When set to AVG, define an AVG in the graphics property of your document or use graphics defined in an imported package.

1.1.0

ratingNumber

Number

The numeric rating between 0 and 5. Used when ratingSlotMode is multiple.

1.1.0

ratingSlotMode

String

multiple

Determines whether to display a single graphical asset for the rating, or build the rating from multiple image assets. When set to single, provide a single graphical asset in the singleRatingGraphic property. When multiple, provide the numeric rating in ratingNumber. With multiple, you can use a default star image or provide your own images to represent the different states for each star (full, half, or empty). See About single and multiple slot modes

1.1.0

ratingSlotPadding

Dimension

3dp

The padding to use between each rating slot. Used when ratingSlotMode is multiple. Can be between 0dp and 4dp

1.1.0

ratingText

String

The text shown besides the rating.

1.1.0

ratingTextOpacity

Number

0.8

The opacity of the text shown next to the rating. Set to a number between 0 and 1.

1.3.0

singleRatingGraphic

any

The graphic to display to represent the rating. Used when ratingSlotMode is single. You can provide either a reference to an AVG or the URL of an image. When ratingGraphicType is AVG, set this property to the name of the graphic as defined in the graphics property or in an imported package. When ratingGraphicType is image, provide the URL of the image to display.

1.1.0

singleRatingGraphicWidth

Dimension

The width of the bounding box for the single graphic that represents the rating. Used when ratingSlotMode is single.

1.1.0

theme

String

dark

Set the dark or light color theme. The selected theme controls the colors used for the component.

1.1.0

About single and multiple slot modes

AlexaRating has two different modes for displaying the rating, set in the ratingSlotMode property:

  • Single – Display a single, static graphic. You can provide the either an AVG or image to display and the width to use for the image.
  • Multiple – Use a numeric rating between 0 and 5, such as "3.5", to dynamically determine the set of graphics that represent the rating. This option uses three different graphics representing the state of each "slot" – full, half, or empty. For example, for a 3.5 rating, this option displays the "full" graphic three times, the "half" graphic once, and finally the "empty" graphic once. As of alexa-layouts 1.6.0 and later, the ratings round up to the nearest half-start. For example, a 3.1 rating displays three and a half stars, and a 3.6 rating displays four stars.

The AlexaRating responsive component includes default "star" graphics for the full, half, and empty states. You can use these or provide your own image or AVG.

The following example displays a 3.5 rating with the default star graphics.

{
  "type": "AlexaRating",
  "ratingSlotPadding": "4dp",
  "ratingSlotMode": "multiple",
  "ratingNumber": 3.5,
  "ratingText": "509 ratings"
}
Default star graphics for multiple slot mode
Default star graphics for multiple slot mode

The following example shows how AlexaRating rounds numbers up to the next half star. Versions of alexa-layouts before 1.6.0 didn't do this rounding.

The following example displays the single graphic defined as "customRating".


{
  "type": "AlexaRating",
  "ratingSlotMode": "single",
  "singleRatingGraphic": "customRating",
  "ratingText": "609 ratings"
}

A single graphic with green and red stars
A single graphic with green and red stars

AlexaRating example

This example shows the complete document that shows both the multiple and single rating slot examples.