Rating provides insight into others opinions and experiences with a product. Use stars or other custom symbols (i.e. smiling faces) :p.
UsageNg Rating
By default it takes accent color of active theme's as background.
<!-- Rating Square -->
<div class="Rating-base MB-2">
<div class="Square" *ngFor="let i of [1,2,3,4,5]">
<span class="Centered" [class.Selected]="i<3" [class.Fraction]="i==3"
[class.Rating-value]="i==5" [innerHTML]="i==5?'2.5':i"></span>
</div>
</div>
<!-- Rating Circle -->
<div class="Rating-base MB-2">
<div class="Circle" *ngFor="let i of [1,2,3,4,5]">
<span class="Centered" [class.Selected]="i<3" [class.Fraction]="i==3"
[class.Rating-value]="i==5" [innerHTML]="i==5?'2.5':i"></span>
</div>
</div>
Use --ls-rating-active-bg CSS variable to change bg color
<div class="Rating-base MB-2" style="--ls-rating-active-bg: purple">
<div class="Square" *ngFor="let i of [1,2,3,4,5]">
<span class="Centered" [class.Selected]="i<3" [class.Fraction]="i==3"
[class.Rating-value]="i==5" [innerHTML]="i==5?'2.5':null"></span>
</div>
</div>
You can use FA icons easily. Just put inside .Centered div.
<div class="Rating MB-2">
<div class="Square" *ngFor="let i of [1,2,3,4,5]">
<span class="Centered" [class.Selected]="i<4">
<i class="fa-solid fa-star fa-spin"></i>
</span>
</div>
</div>
For coloring Fraction correctly; you have to put the gradient svg as below.
And set style="--ls-rating-gradient-id: 'url(#FaGradientId)'" like this. <div class="Rating MB-2" style="--ls-rating-gradient-id: 'url(#FaGradientId)'">
<svg style="width:0;height:0;position:absolute;" aria-hidden="true" focusable="false">
<linearGradient id="FaGradientId" x2="1" y2="1">
<stop offset="0%"/>
<stop offset="100%"/>
</linearGradient>
</svg>
...
</div>
<div class="Rating MB-2" style="--ls-rating-gradient-id: url(#FaGradientTest1)">
<!--For Fraction Color~-->
<svg style="width:0;height:0;position:absolute;" aria-hidden="true" focusable="false">
<linearGradient id="FaGradientTest1" x2="1" y2="1">
<stop offset="0%"/>
<stop offset="100%"/>
</linearGradient>
</svg>
<!--~For Fraction Color-->
<div class="Square" *ngFor="let i of [1,2,3,4,5]">
<span class="Centered" [class.Selected]="i<3" [class.Fraction]="i==3">
<i class="fa-solid fa-star"></i>
</span>
</div>
</div>
<div class="W-80 W-lg-50 MX-auto">
<div class="Rating MB-2"
style="--ls-rating-active-bg: purple; --ls-rating-gradient-id: url(#FaGradientTest2)">
<!--For Fraction Color~-->
<svg style="width:0;height:0;position:absolute;" aria-hidden="true" focusable="false">
<linearGradient id="FaGradientTest2" x2="1" y2="1">
<stop offset="0%"/>
<stop offset="100%"/>
</linearGradient>
</svg>
<!--~For Fraction Color-->
<div class="Square" *ngFor="let i of [1,2,3,4,5]">
<span class="Centered" [class.Selected]="i<3" [class.Fraction]="i==3">
<i class="fa-solid fa-star"></i>
</span>
</div>
</div>
</div>