The Rating widget is used to perform a quick rating operation on something.
{% embed url="https://youtu.be/ssm7TYCQtfo" %}
Use the Rate component to rate any sort of information from the connected data source. It's customizable and features rich.
Properties allow you to edit the widget, connect it with other widgets and customize the user actions.
These properties allow you to edit the Rating widget. All these properties are present in the property pane of the widget. The rating widget comes with the following settings:
| Property | Description |
|---|---|
| Max Rating | The total number of stars you would like to rate the information with |
| Default Rating | Sets the default option of the rating widget |
| Tooltips | Sets the tooltip content of starts. This expects an an array of strings that can describe the values of each star |
| Size | The star's sizes can be varied, default is set to Medium |
| Allow half stars | When toggled, half star ratings are accepted |
| Visible | Controls widget's visibility on the page. When turned off, the widget will not be visible when the app is published |
| Disabled | Disables input/selection to the widget. The widget will remain visible to the user but user input/selection will not be allowed. |
| Animate Loading | Allows you to control a widget’s animation on the page load. |
These properties help you share values between widgets and also allow you to easily access the widget property within Queries or JS functions.
| Property | Description | Code Snippet |
|---|---|---|
| isVisible | This property indicates whether the widget is visible or not. | {{widget_name.isVisible}} |
| maxCount | This property indicates the total number of stars you would like to rate the information with. | {{widget_name.maxCount}} |
| value | This property indicates the value selected by user. | {{widget_name.value}} |
They are a set of actions that you can perform on the widget.
| Events | Description |
|---|---|
| onChange | Triggers an action when the rate is changed. See a list of supported actions. |
Style properties allow you to change the look and feel of the widget.
| Style | Description |
|---|---|
| Active color | Sets the color of stars for that are provided in the default rate. |
| Inactive color | Sets the color of inactive stars |