StarRating
SVG-based star rating with half-star support and customizable colors / size.
Basic Usage
vue
<template>
<MStarRating :model-value="3.5" />
</template>Interactive
Click the left half of a star for .5, right half for a full star.
Score: 0
vue
<script setup>
import { ref } from 'vue'
const score = ref(0)
</script>
<template>
<MStarRating v-model="score" :readonly="false" :size="28" />
</template>Custom Style
Props
| Name | Type | Default | Description |
|---|---|---|---|
| modelValue | number | - | Current score (0.5 step) |
| maxStars | number | 5 | Total stars |
| size | number | 20 | Star size (px) |
| gap | number | 2 | Gap between stars (px) |
| fillColor | string | '#FBBF24' | Filled color |
| emptyColor | string | '#D1D5DB' | Empty color |
| strokeWidth | number | 1.5 | Stroke width |
| readonly | boolean | true | Read-only |
| wrapperClass | string | '' | Wrapper class |
Events
| Name | Args | Description |
|---|---|---|
| update:modelValue | (value: number) | Emitted when score changes |