Оценка

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

Базовое использование

Базовое использование

<script setup>
import { ref } from 'vue'
const rate1 = ref(3)
</script>

<template>
  <LhRate v-model="rate1" />
</template>

<script>
export default {
  data() {
    return { rate1: 3 }
  },
}
</script>

<template>
  <LhRate v-model="rate1" />
</template>

Половина звезды и только чтение

Половина звезды / только чтение

★★★★★4.5 звёзд

<script setup>
import { ref } from 'vue'
const rate2 = ref(3.5)
</script>

<template>
  <div class="demo-rate-row">
    <LhRate v-model="rate2" allow-half />
    <LhRate :model-value="4.5" readonly allow-half show-score />
  </div>
</template>

<script>
export default {
  data() {
    return { rate2: 3.5 }
  },
}
</script>

<template>
  <div class="demo-rate-row">
    <LhRate v-model="rate2" allow-half />
    <LhRate :model-value="4.5" readonly allow-half show-score />
  </div>
</template>

max задаёт общее количество звёзд, disabled отключает взаимодействие, character задаёт пользовательский символ оценки.

Настройка

<script setup>
import { ref } from 'vue'
const rate3 = ref(8)
const rate4 = ref(3)
const rate5 = ref(4)
</script>

<template>
  <div class="demo-rate-row">
    <LhRate v-model="rate3" :max="10" />
    <LhRate v-model="rate4" disabled />
    <LhRate v-model="rate5" character="А" />
  </div>
</template>

<script>
export default {
  data() {
    return { rate3: 8, rate4: 3, rate5: 4 }
  },
}
</script>

<template>
  <div class="demo-rate-row">
    <LhRate v-model="rate3" :max="10" />
    <LhRate v-model="rate4" disabled />
    <LhRate v-model="rate5" character="А" />
  </div>
</template>

API

LhRate Props

Свойство	Описание	Тип	По умолчанию
modelValue	Текущая оценка (контролируемый v-model)	number	0
max	Максимальное количество звёзд	number	5
allowHalf	Разрешить половину звезды	boolean	false
readonly	Только чтение (выводит текстовое значение звёзд для скринридера)	boolean	false
disabled	Отключён	boolean	false
character	Пользовательский символ	string	—
showScore	Показывать текст с оценкой	boolean	false
scoreTemplate	Шаблон оценки (плейсхолдер {n})	string	—
sx	Свойства быстрой разметки sx	LhSxProps	—

Events

Событие	Описание	Параметры обратного вызова
update:modelValue	Срабатывает при изменении оценки, используется с v-model	(value: number)
change	Срабатывает при изменении оценки (и при клике, и с клавиатуры)	(value: number)

Доступность

• В интерактивном состоянии имеет role="radiogroup", каждая звезда — настоящая фокусируемая кнопка (roving tabindex), оценка меняется стрелками, Home/End — обнуление / максимум
• В режиме половины звезды шаг с клавиатуры равен 0.5
• В состоянии только для чтения выводится role="img" + aria-label="n звёзд" для скринридера
• Кольцо фокуса через :focus-visible

Определения типов

Структуры TypeScript, экспортируемые этим компонентом (автоматически извлечены из packages/components/rate/src/types.ts и исходников @lh-ui/share/core/*; нажмите на каждый пункт, чтобы развернуть полное определение; описания свойств см. в таблице Props выше):

LhRateProps

export interface LhRateProps {
  /** Текущая оценка (контролируемый v-model) */
  modelValue?: number
  /** Максимальное количество звёзд */
  max?: number
  /** Разрешить половину звезды */
  allowHalf?: boolean
  /** Только чтение (выводит текстовое значение звёзд для скринридера) */
  readonly?: boolean
  disabled?: boolean
  /** Пользовательский символ (по умолчанию ★) */
  character?: string
  /** Показывать текст с оценкой */
  showScore?: boolean
  /** Шаблон оценки (плейсхолдер {n}) */
  scoreTemplate?: string
  /** Свойства быстрой разметки sx */
  sx?: LhSxProps
}

Константы

Публичные константы, используемые этим компонентом (в столбцах «Тип / По умолчанию» таблицы Props можно перейти к одноимённой записи):

LH_RATE_MAX_DEFAULT _{(из @lh-ui/share/core/rate)}

/** Количество звёзд по умолчанию */
export const LH_RATE_MAX_DEFAULT = 5