The Star Ratings component

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:

  1. Open the Components panel, then the Miscellaneous folder.
  2. Drag the Star Ratings component to the stage.
  3. In the Properties panel, find the Star Ratings properties section and change the Rating Value to the number of stars you want.
  4. 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 Value is less than Max Value.
Fill Empty Check this box to fill empty stars with a translucent shade of the primary color if Show Empty is enabled. If this box is unchecked, empty stars show only as outlines.
Primary Color The fill color used for stars (if Gradient Type is 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 Type is 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 Value is set higher. The default is 5.
Min Value The lowest rating shown by this component. If Rating Value is 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 Value set to 3 and Max Value set 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 component

You 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 Event dialog, set the Star Ratings component as the target.

Learn how to configure events.

Was this helpful?
How can we improve it?