Rating Component
Overview
In its most traditional use case, the rating component is used to display a rating in your app and allows users to leave their own rating. However, there are a lot of different icons to choose from so you can customize the "meaning" of your ratings. For example, you could use five hearts in a quiz app to represent the five lives or five guesses that each player gets.
Properties
Rating
Value
Initial value of the rating.
Number
Count
Maximum value of the rating.
Number between 5 and 10
Image
Shape of the rating's icons.
Select from menu:
Pick One - menu of pre-set icons you can choose from. Preview these icons here.
Custom Image - upload images as an asset or provide an image URL (.jpg or .png files) for filled and empty icons.
Read Only
Toggle whether or not the user can edit the rating.
True/False
Rating Color
Color of filled-in icons reflecting the current rating.
Color
Background Color
Color of unfilled icons.
Color
Layout
X
The location of the top left corner of the rating component on the X-axis, where the left-hand side is X=0
Number
Y
The location of the top left corner of the rating component on the Y-axis, where the top side is Y=0.
Number
Height
Height of the rating component in pixels.
Number
Width
Width of the rating component in pixels.
Number
Resize Mode
Define the dimensions of the rating component.
Select from list [Stretch, Float in Place]
Rating Blocks
Event Blocks
When Rating On Rate
This event block fires when a user inputs a rating in the rating component.
Properties Blocks
There are two types of property blocks: dark green "set" and light green "get" blocks. The specific blocks available vary according to the UI component.
The dark green set blocks allow you to change the component's properties using blocks. For example, if you don't want a group component to be enabled for a user until they've typed a set number of characters into a text input component, you can use the group's dark green set group's disabled status block.
The light green get blocks allow you to access the properties of a component (e.g. color, font, width, text, etc.).
Direction
The direction property is unique to the rating icon. Using these blocks, you can define how the rating component is filled. You can choose between row (left to right), row-reverse (right to left), column (top to bottom) or column-reverse (bottom to top).
Icon Margin
The icon margin property is unique to the rating icon. Use these blocks to get or change the margin size between the icons of the rating component.
Last updated
Was this helpful?