@page "/"
<h1>Hello, world!</h1>
Welcome to your new app.
<style>
.rating {
--rating: 0;
--percent: calc(var(--rating) * 20%);
position: relative;
display: inline;
}
.rating::after {
position: absolute;
content:"⭐⭐⭐⭐⭐";
clip-path: polygon(0 0, var(--percent) 0, var(--percent) 100%, 0 100%);
background-color: transparent;
/* Purely cosmetic to align these stars vertically */
top: -0.2rem;
}
.rating::before {
position: absolute;
left: calc(100%);
content:"⭐⭐⭐⭐⭐";
opacity: 0.2;
/* Purely cosmetic to align these stars vertically */
top: -0.2rem;
}
</style>
<input type="text" @bind=Rating inputmode="decimal" pattern="\d+([\.]\d+)?"/>
<label class="rating" style=@($"--rating: {Rating}")>Rating : </label>
@code
{
decimal Rating=3.3M;
}