Rating

Звёздный рейтинг с предпросмотром при наведении, половинчатыми звёздами, эмодзи, цветовыми картами, анимациями и пользовательскими иконками.

3

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

Half Stars

3.5

<template>
  <VxRating v-model="rating" allow-half />
</template>

Show Value, Count & Reviews

3/ 5(142)

<template>
  <VxRating v-model="rating" show-value show-count :review-count="142" />
</template>

Format Value

3.5 pts

<template>
  <VxRating v-model="rating" show-value :format-value="v => v.toFixed(1) + ' pts'" />
</template>

With Texts

Bad

<template>
  <VxRating :texts="['Terrible', 'Bad', 'OK', 'Good', 'Excellent']" />
</template>

Heart Icon

<template>
  <VxRating icon="heart" color="#ef4444" />
</template>

Thumb Icon

<template>
  <VxRating icon="thumb" color="#3b82f6" :max="3" />
</template>

Emoji Mode

😡

😕

😐

🙂

😍

💀

👎

👌

👍

🔥

<template>
  <VxRating :emojis="['😡', '😕', '😐', '🙂', '😍']" />
  <VxRating :emojis="['💀', '👎', '👌', '👍', '🔥']" />
</template>

Color Map

Разный цвет для каждого уровня звезды.

3

<template>
  <VxRating :color-map="['#ef4444', '#f97316', '#eab308', '#22c55e', '#10b981']" />
  <!-- 1 star = red, 2 = orange, 3 = yellow, 4 = green, 5 = emerald -->
</template>

Tooltip

Показывает «3 / 5» при наведении.

<template>
  <VxRating v-model="rating" tooltip />
</template>

Animation

bounce

pulse

<template>
  <VxRating animation="bounce" />
  <VxRating animation="pulse" />
</template>

Custom Icon (Slot)

<template>
  <VxRating v-model="rating">
    <template #icon="{ state, color }">
      <MyIcon :active="state !== 'empty'" :color="color" />
    </template>
  </VxRating>
</template>

Custom Colors

<template>
  <VxRating color="#22c55e" />
  <VxRating color="#f97316" inactive-color="#374151" />
</template>

Allow Clear

0

<template>
  <VxRating v-model="rating" allow-clear />
</template>

Max Stars

3/ 3

2/ 10

<template>
  <VxRating :max="3" />
  <VxRating :max="10" />
</template>

Sizes

xs

sm

default

lg

xl

<template>
  <VxRating size="xs" />
  <VxRating size="sm" />
  <VxRating />
  <VxRating size="lg" />
  <VxRating size="xl" />
</template>

Readonly & Disabled

readonly

4.5

disabled

<template>
  <VxRating :model-value="4.5" allow-half readonly show-value />
  <VxRating :model-value="3" disabled />
</template>

Props

Prop	Type	Default	Description
modelValue	number	0	Значение рейтинга (v-model)
max	number	5	Максимум звёзд
allowHalf	boolean	false	Выбор половинной звезды
allowClear	boolean	false	Клик по той же для сброса
disabled	boolean	false	Отключить
readonly	boolean	false	Только для чтения
size	'xs' | 'sm' | 'default' | 'lg' | 'xl'	'default'	Размер
color	string	'#facc15'	Активный цвет
inactiveColor	string	''	Цвет пустой иконки
colorMap	string[]	—	Цвет на каждый уровень (1=красный, 2=оранжевый...)
icon	'star' | 'heart' | 'thumb'	'star'	Встроенная иконка
customIcon	Component	—	Vue-компонент в качестве иконки
emojis	string[]	—	Эмодзи на каждую звезду (заменяет иконки)
showValue	boolean	false	Показывать числовое значение
showCount	boolean	false	Показывать «/ max»
reviewCount	number | string	—	Показывать количество отзывов «(142)»
texts	string[]	—	Метка на каждый уровень
tooltip	boolean	false	Показывать подсказку «3 / 5» при наведении
animation	'' | 'bounce' | 'pulse'	''	Анимация клика
formatValue	(v: number) => string	—	Пользовательский форматтер значения

Events

Event	Type	Description
update:modelValue	(v: number)	Рейтинг изменился
change	(v: number)	Рейтинг изменился

Slots

Slot	Props	Description
icon	{ index, state, color, inactiveColor }	Пользовательская иконка. state: 'full' / 'half' / 'empty'