Rate Component: Display Variations, Events, and Method Examples
Category: ExamplesThe Rate component provides star-based rating functionality with half-star precision and full customization of rating icons/images.
Changing Score Values
By default, each star represents 1 point. Use the increment attribute to change the point value per star.
Setting Initial Value
Use the value attribute to set the initial value. The default range is between 0~5.
Displaying Title
Use the heading attribute to show a title on the left side.
Showing Tooltip
Set tooltip to display tooltip bubbles.
Tooltips come from the Tooltip module, so you can configure them using the same parameters as the Tooltip module by including them in the tooltip attribute.
Like the result attribute, you can customize tooltip content format using tooltip.format.
Highlight Display
The default display shows continuous highlighting.
Changing Icons
Use the star attribute to change icon class names.
To change icons to images, first set type=image, then set star to the image URL.
Showing Labels
Set label to show default labels below icons.
Label content can be customized using the label.format parameter, which supports template variables id, title, and count.
Setting Input Field
When a rate instance is created, you can inspect the container in developer tools to see it automatically generates an type=range form control, but without a name attribute.
Since output.value = output.stars*increment, when increment is not 1, output.value and output.stars will differ. The fill parameter controls which value gets sent to the type=range control.
Filtering Stars
Set omitted to hide grayed-out stars, making the component more compact.
Caching Values
To persist the rating state across page refreshes, set the stor-name attribute to a unique page-specific value.