TStarRating / 星级评分

StarRating for collecting or displaying ratings. Supports half-stars, custom icons (star/heart/ghost/circle), labels, scores, and read-only mode. / 星级评分用于收集或展示评分，支持半星、自定义图标、文字标签、分数展示和只读模式。

Props / 属性

Prop	Type / 类型	Default / 默认值	Description / 说明
modelValue	number	0	v-model rating value
max	number	5	Maximum rating
size	'sm' | 'default' | 'md' | 'lg'	'default'	Size
color	string	—	Active color
icon	'star' | 'heart' | 'ghost' | 'circle'	'star'	Icon type
readonly	boolean	false	Read-only mode
allowHalf	boolean	false	Allow half-star selection
showText	boolean	false	Show descriptive text
clearable	boolean	true	Allow clearing by clicking again
showScore	boolean	false	Show numeric score

Basic Usage / 基础用法

<script setup lang="ts">
import { TStarRating } from '@gulcc/tabler-vue'

const rating = ref(3)
</script>

<template>
  <TStarRating v-model="rating" />
</template>

Tips / 避坑指南

• allowHalf enables half-star increments (0.5 steps)
• clearable allows the user to click the same rating again to clear it
• Customize display text via texts array (e.g., ['Bad', 'OK', 'Good', 'Great'])
• Score template format: '{value}/{max} 分' — customize via scoreTemplate prop