This component is not supported for AMPHTML ads , video ads , or image ads .
The Star Ratings component displays a row of star icons, such as you might see for online ratings.
To use the Star Ratings component in your project:
- Open the Componentspanel, then the Miscellaneousfolder.
- Drag the Star Ratings
component to the stage.
- In the Propertiespanel, find the Star Ratingsproperties section and change the Rating Valueto the number of stars you want.
- To customize the component some more, adjust the other properties (described below ).
Properties
Change the appearance and behavior of the Star Ratings component in the Properties panel.
| Property | Description |
|---|---|
| Name | The component name. |
| Rating Value | The numeric rating. Decimals are allowed, and fractional parts from 0.29 to 0.71 show a half-star (e.g., entering 4.29 shows 4½ stars). Can be bound to dynamic data . |
| Icon Size | The size of each star, from 5 to 50 pixels. |
| Show Empty | Check this box to show empty stars if Rating Valueis less than Max Value. |
| Fill Empty | Check this box to fill empty stars with a translucent shade of the primary color if Show Emptyis enabled. If this box is unchecked, empty stars show only as outlines. |
| Primary Color | The fill color used for stars (if Gradient Typeis set to none) or the first color used for the gradient fill. |
| Secondary Color | The second color used for the gradient fill. (Not used if Gradient Typeis set to none.) |
| Gradient Type | The gradient fill type. Select linear, radial, or none(the default). |
| Max Value | The highest rating shown by this component, even if Rating Valueis set higher. The default is 5. |
| Min Value | The lowest rating shown by this component. If Rating Valueis set lower, such as by dynamic data, the component displays nothing. (You can use the Rating value less than minimum event to detect when this happens.) The default Min Value is 3. |
Examples of customizing star appearance
The following examples are all for a Star Ratings component with Rating Valueset to 3 and Max Valueset to 5.
- Show Empty:---
- Primary Color: #ffcd00
- Gradient Type:none
- Show Empty:✓
- Fill Empty:---
- Primary Color: #ffcd00
- Secondary Color: #e16f00
- Gradient Type:linear
- Show Empty:✓
- Fill Empty:✓
- Primary Color: #ffcd00
- Secondary Color: #e16f00
- Gradient Type:radial
Events and actions
Events sent by the Star Ratings componentYou can trigger other actions based on the following Star Ratings component events:
| Event | Description |
|---|---|
| Star ratings created | Sent when the star ratings icons have been created. |
| Rating value less than minimum | Sent when either Rating Value or Max Value is less than Min Value. |
To select one of these events in the Eventdialog, set the Star Ratings component as the target.
Learn how to configure events .
