Rating
The Rating component provides a visually representation of a numerical assessment.
Usage
- The Rating component serves a specific purpose: to visually represent numerical values in a clear and precise manner. It is not intended for decorative elements or embellishments that don't convey specific ratings or quantitative information.
Appearance
A. Full icon
Determines the visual representation of a fully rated item within the rating component.
B. Empty icon
Controls the appearance of the unrated or the base of a partially rated items, often represented by an unfilled or outline version of the full icon. This helps users understand the portion of the rating that is yet to be fulfilled.
Max
This property specifies the total number of items that the rating component can display. This sets the scale of the rating, allowing users to rate an item up to this maximum number. For safety and usability, the maximum allowable value is capped at 10 to prevent overly complex rating scales.
Size
The available options are sm for small and lg for large.
Precision
Precision enables fine-tuning of the rating's granularity. It determines the smallest fraction of a rating item (e.g., a quarter of a star or 0.25) by which the score can increase or decrease. This feature provides flexibility in capturing more nuanced feedback.
Customisation
Allows for the personalisation of the rating item's appearance using the predefined icons available in the Chameleon foundations. Both the 'Full Icon' and 'Empty Icon' can be customised to align with the aesthetic or context.
Do's & Don'ts
Although you are the star to my heart, use matching icons instead.