RatingIndicator
The Rating Indicator is used to display a specific number of icons that are used to rate an item. Additionally, it is also used to display the average and overall ratings.
Usage​
The recommended number of icons is between 5 and 7.
Responsive Behavior​
You can change the size of the Rating Indicator by changing its font-size
CSS property.
Example: <ui5-rating-indicator style="font-size: 3rem;"></ui5-rating-indicator>
Keyboard Handling​
When the ui5-rating-indicator
is focused, the user can change the rating
with the following keyboard shortcuts:
- [RIGHT/UP] - Increases the value of the rating by one step. If the highest value is reached, does nothing
- [LEFT/DOWN] - Decreases the value of the rating by one step. If the lowest value is reached, does nothing.
- [Home] - Sets the lowest value.
- [End] - Sets the highest value.
- [SPACE/ENTER/RETURN] - Increases the value of the rating by one step. If the highest value is reached, sets the rating to the lowest value.
- Any number - Changes value to the corresponding number. If typed number is larger than the number of values, sets the highest value.
ES6 Module Import​
import "@ui5/webcomponents/dist/RatingIndicator.js";
Basic Sample​
Properties​
value​
max​
disabled​
readonly​
accessibleName​
accessibleNameRef​
required​
tooltip​
Slots​
No slots available for this component.
Events​
change​
Methods​
No methods available for this component.
CSS Parts​
No CSS parts available for this component.