Rating Component
Last updated
Last updated
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.
| 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:
|
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 |
| 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 |
This event block fires when a user inputs a rating in the rating component.
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.).
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).
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.
