Rating

Hover koʻrinishi, yarim yulduz, emojilar, rang xaritalari, animatsiyalar va maxsus ikonkalar bilan yulduzli baholash.

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

Har bir yulduz darajasi uchun boshqa rang.

3

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

Tooltip

Hover qilinganda "3 / 5" ni koʻrsatadi.

<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	Baholash qiymati (v-model)
max	number	5	Maksimal yulduzlar
allowHalf	boolean	false	Yarim yulduz tanlash
allowClear	boolean	false	Qayta belgilash uchun aynisini bosish
disabled	boolean	false	Oʻchirish
readonly	boolean	false	Faqat oʻqish
size	'xs' | 'sm' | 'default' | 'lg' | 'xl'	'default'	Oʻlcham
color	string	'#facc15'	Faol rang
inactiveColor	string	''	Boʻsh ikonka rangi
colorMap	string[]	—	Har daraja boʻyicha rang (1=qizil, 2=toʻq sariq...)
icon	'star' | 'heart' | 'thumb'	'star'	Oʻrnatilgan ikonka
customIcon	Component	—	Ikonka sifatida Vue komponenti
emojis	string[]	—	Har yulduz uchun emoji (ikonkalar oʻrnini bosadi)
showValue	boolean	false	Raqamli qiymatni koʻrsatish
showCount	boolean	false	"/ max" ni koʻrsatish
reviewCount	number | string	—	"(142)" sharh sonini koʻrsatish
texts	string[]	—	Har daraja uchun label
tooltip	boolean	false	Hover qilinganda "3 / 5" tooltip koʻrsatish
animation	'' | 'bounce' | 'pulse'	''	Bosish animatsiyasi
formatValue	(v: number) => string	—	Maxsus qiymat formatlovchisi

Events

Event	Type	Description
update:modelValue	(v: number)	Baholash oʻzgardi
change	(v: number)	Baholash oʻzgardi

Slots

Slot	Props	Description
icon	{ index, state, color, inactiveColor }	Maxsus ikonka. state: 'full' / 'half' / 'empty'