mirror of
https://github.com/ToolJet/ToolJet
synced 2026-04-22 14:07:26 +00:00
96 lines
8.2 KiB
Markdown
96 lines
8.2 KiB
Markdown
---
|
||
id: star-rating
|
||
title: Star Rating
|
||
---
|
||
|
||
The **Star Rating** component can be used to gather user feedback and provide a visual representation of ratings, helping users make informed decisions, provide social proof, and evaluate the quality or popularity of a product or service.
|
||
|
||
**Why Use It?**
|
||
- **Collect User Feedback**: Ideal for capturing user opinions on products, services, or content in a simple, visual format.
|
||
- **Display Ratings**: Perfect for showing aggregated scores, like average ratings for items, courses, or articles.
|
||
- **Enhanced User Experience**: Offers an intuitive and interactive way for users to express preferences, including half-star precision for more accurate ratings.
|
||
|
||
## Data
|
||
|
||
| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
|
||
| :-------------------------------------- | :--------------------------------------------------------------------------------- | :-------------------------------------------- |
|
||
| **Label** | Text to display as the label for the star rating. | `String` |
|
||
| **Icon Type** | Select the icon to display for the rating. | `stars` or `heart` |
|
||
| **Number of stars** | Total number of stars displayed on initial load. Default is 5. | `Integer` |
|
||
| **Default number of selected stars** | Sets how many stars are selected by default. Default is 3. | `Integer` or `half` |
|
||
| **Allow editing** | Toggle on to allow users to edit. | `Boolean` (`true` / `false`) |
|
||
| **Enable half star** | Toggle on to allow selection of half stars. Default is `false`. | `Boolean` (`true` / `false`) |
|
||
| **Tooltips** | Array of strings used to show informative tooltips for each star. Mapped by index. | `Array` of `String` (default: `["Very Poor","Poor","Average", "Good","Excellent"]`) |
|
||
|
||
## Events
|
||
|
||
| <div style={{ width:"100px"}}> Event </div> | <div style={{ width:"100px"}}> Description </div> |
|
||
| :------------------------------------------ | :------------------------------------------------ |
|
||
| On change | Triggers whenever the user clicks a star. |
|
||
|
||
:::info
|
||
Check [Action Reference](/docs/actions/run-query) docs to get the detailed information about all the **Actions**.
|
||
:::
|
||
|
||
## Component Specific Actions (CSA)
|
||
|
||
The following actions of the component can be controlled using the component-specific actions (CSA), you can trigger it using an event or use a RunJS query.
|
||
|
||
| <div style={{ width:"100px"}}> **Action** </div> | **Description** | **RunJS Query** |
|
||
|:------------------------------------------|:------------------------------------------------|:-----------------------------------------|
|
||
| **setValue( )** | Sets the current rating value programmatically. | `components.starrating1.setValue()` |
|
||
| **resetValue( )** | Resets the rating to the default value. | `components.starrating1.resetValue()` |
|
||
| **setVisibility( )** | Controls the visibility of the component. | `components.starrating1.setVisibility()` |
|
||
| **setLoading( )** | Sets the component to a loading state. | `components.starrating1.setLoading()` |
|
||
| **setDisable( )** | Disables user interaction with the component. | `components.starrating1.setDisable()` |
|
||
|
||
## Exposed Variables
|
||
|
||
| <div style={{ width:"100px"}}> Variables </div> | <div style={{ width:"135px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
|
||
| :---------------------------------------------- | :------------------------------------------------| :------------------------------------------------- |
|
||
| value | Holds the value entered by the user whenever a rating is added on the component. | `{{components.starrating1.value}}` |
|
||
| label | Holds the label name of the component. | `{{components.starrating1.label}}` |
|
||
| isLoading | Indicates if the component is loading. | `{{components.starrating1.isLoading}}` |
|
||
| isVisible | Indicates if the component is visible. | `{{components.starrating1.isVisible}}` |
|
||
| isDisabled | Indicates if the component is disabled. | `{{components.starrating1.isDisabled}}` |
|
||
|
||
## Additional Actions
|
||
|
||
| <div style={{ width:"100px"}}> Action </div> | <div style={{ width:"150px"}}> Description </div> | <div style={{ width:"250px"}}> Configuration Options </div> |
|
||
| :------------------------------------------- | :-------------------------------------------------| :---------------------------------------------------------- |
|
||
| Loading state | Enables a loading spinner, often used with `isLoading` to indicate progress. Toggle or set dynamically. | Enable/disable the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
|
||
| Visibility | Controls component visibility. Toggle or set dynamically. | Enable/disable the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
|
||
| Disable | Enables or disables the component. Toggle or set dynamically. | Enable/disable the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
|
||
| Tooltip | Provides additional information on hover. Set a string value for display. | String (e.g., `Select an option.` ). |
|
||
|
||
## Devices
|
||
|
||
| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"150px"}}> Description </div> | <div style={{ width:"250px"}}> Expected Value </div> |
|
||
| :--------------------------------------------- | :------------------------------------------------ | :----------------------------------------------------|
|
||
| Show on desktop | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
|
||
| Show on mobile | Makes the component visible in mobile view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
|
||
|
||
## Styles
|
||
|
||
### Label
|
||
|
||
| **Property** | **Description** | **Configuration Options** |
|
||
| -------------| ----------------| ------------------------- |
|
||
| **Style** | Choose whether to keep the label in **standard** or **legacy** style. | Dropdown: *Standard*, *Legacy* |
|
||
| **Label color** | Change the color of the label text. | Color picker / HEX / RGBA / Custom Themes |
|
||
| **Alignment** | Adjust the placement of the label relative to the component. | *Side* / *Top* and *Left* / *Right* |
|
||
| **Width** | Sets the width of the label. | Keep `Auto width` for standard sizing, or deselect to adjust using a slider or an **fx** expression returning a numeric value. |
|
||
|
||
### Icon
|
||
|
||
| **Property** | **Description** | **Configuration Options** |
|
||
| ------------------------- | ------------------------------------------ | ----------------------------------------- |
|
||
| **Selected background** | Color for selected icons (stars/hearts). | Color picker / HEX / RGBA / Custom Themes |
|
||
| **Unselected background** | Color for unselected icons (stars/hearts). | Color picker / HEX / RGBA / Custom Themes |
|
||
|
||
### Container
|
||
|
||
| **Property** | **Description** | **Configuration Options** |
|
||
| -------------- | ------------------------------------------------- | -------------------------------------------------------------------------------- |
|
||
| **Box shadow** | Apply shadow styling to the component container. | Pick a shadow color, adjust properties, or define programmatically using **fx**. |
|
||
| **Padding** | Maintain consistent spacing inside the container. | *Default* or *None* |
|