You can freely set the number of stars, the icons for empty, half, and full stars, and the color of the stars.
The rating value can be dynamically updated.
vue
<template>
<Rating :value="50" />
</template>
Min Max
vue
<template>
<Rating
:value="3"
:min="0"
:max="5"
/>
</template>
Icon
vue
<template>
<Rating
:value="75"
icon-empty="line-md:star-alt"
icon-half="line-md:star-half-twotone"
icon-fill="line-md:star-twotone"
/>
</template>
Icon Count
vue
<template>
<Rating
:value="80"
:icon-count="12"
/>
</template>
Style
vue
<template>
<Rating
:value="50"
margin="e-3"
display-headings="1"
gap="3"
/>
</template>
Gap
vue
<template>
<Rating
:value="50"
gap="3"
/>
</template>