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.

A rating component displaying a rating of 3.5/5.

Properties

Rating

Property	Description	Data Type
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

Property	Description	Data Type
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.