Get started with the rating component to show an aggregate of reviews and scores in the forms of stars or numbers.
You can find multiple examples on this page including different styles, sizes, and variants of the rating component and other associated elements such as a comment or card.
Setup #Letâs import all necessary components in the script tag. We import a heart, thumb-up, and smiley icons, but you can use any icons as you like.
Default rating #The default rating icon is a star. Set the total and rating props. The id prop is required. Use a unique name.
You can use the Star component with the iconIndex and fillPercent props.
If you also want to show a text near the stars you can use the text snippet to add any text.
Aggregate more results by using this example to show the amount of reviews and the average score.
Icon and size #The default icon size is 24. Import your icon and set it in a icon props.
Set the total,rating, and ratings prop for AdvancedRation component. Use the rating slot for Rating component with the total and rating props. Use the globalText slot for additional information.
As we describe in the Rating component, you can change an icon in the Rating component.
Score rating # Rating comment #Use this component to show a single rating comment and its score alongside other components such as the user profile avatar, name, post date, and more.
Review content #Use this component to show the review content from a user alongside the avatar, location, details, and the score inside a card element.
Component data #The component has the following props, type, and default values. See types page for type information.
References #RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4