Ratings
Overview
Ratings, a meaningful way to show how much an item (mostly product from online store) is appreciated…or not.
It is showed very often with stars and average value of reviewers’ ratings.
Examples below show you how you can use AstroPine’s Rating component.
Default Ratings
By default, Ratings displays one star as icon and value props is a integer / float number between 0 and 5.
Under the hood, Ratings turns value in percentage.
3.2
Copied !
---
import Ratings from "$components/ratings/Ratings.astro";
const value = 3.2;
---
<div class="p-4 border rounded bg-white">
<div class="flex gap-x-2 items-end">
<span>{value}</span>
<Ratings {value} applyDefsId="default-ratings-example" />
</div>
</div>
Number Stars Ratings
By using nb props, number of total ratings icon will be different than 1.
Copied !
---
import Ratings from "$components/ratings/Ratings.astro";
---
<div class="p-4 border rounded bg-white">
<Ratings
nb={5}
size={7}
value={3.6}
applyDefsId="five-stars-ratings-example"
/>
</div>