QRating компонент оценки

Компонент QRating библиотеки Quasar предназначен для отображения системы рейтингов с возможностью интерактивного выбора оценки пользователем. Он является гибким инструментом для визуализации оценок и поддерживает различные типы иконок, кастомные размеры, цвета и события.

Подключение и использование:
  • v-model — связывает текущую выбранную оценку с переменной.
  • max — максимальное количество элементов рейтинга.
  • color — цвет выделенных элементов.
  • icon — иконка для отображения рейтинга (например, star, favorite, thumb_up).
  • size — размер каждой иконки рейтинга.

Настройка количества элементов рейтинга

Количество звезд или других иконок регулируется свойством max. Можно использовать любое целое число, задающее количество элементов, отображаемых пользователю.

Если max не указан, по умолчанию используется значение 5.

Работа с дробными оценками

QRating поддерживает дробные значения, что позволяет отображать половинные или четвертные оценки.

  • fraction — число, определяющее, на сколько частей можно делить одну иконку. Например, fraction=2 позволяет выбирать половинные значения.

При использовании дробей необходимо корректно обрабатывать значения, чтобы визуально отображалась частичная заполненность иконок.

Настройка иконок

Иконки в QRating можно менять не только на стандартные Material Icons, но и использовать кастомные компоненты или SVG.

  • no-reset — предотвращает сброс рейтинга при повторном клике на уже выбранную иконку.
  • icon — можно задавать различные иконки для выделенных (icon) и невыделенных элементов (empty-icon):

События и реактивность

QRating поддерживает следующие события:

  • @input — срабатывает при изменении рейтинга.
  • @hover — при наведении на элемент рейтинга, возвращает индекс подсвеченной иконки.

Эти события позволяют динамически реагировать на действия пользователя и интегрировать компонент с системой отзывов или других интерактивных элементов интерфейса.

Кастомизация внешнего вида

QRating позволяет изменять внешний вид иконок через следующие свойства:

  • color — основной цвет выделенной части.
  • text-color — цвет текста внутри элемента, если используется кастомный слот.
  • size — размер иконки.
  • class — добавление пользовательских классов CSS для дополнительного стайлинга.

Можно также использовать слоты для полной кастомизации каждой ячейки рейтинга:
  • scope.selected — булевое значение, указывающее, выделена ли текущая ячейка.
  • scope.index — индекс текущей иконки.

Управление интерактивностью

  • readonly — делает рейтинг только для отображения.
  • disable — полностью отключает интерактивность и визуально деактивирует элементы.
  • readonly позволяет отображать текущую оценку без возможности её изменения.
  • disable визуально делает элементы неактивными и блокирует любые события.

Доступность

Компонент QRating поддерживает клавиатурное управление и фокус для пользователей с ограниченными возможностями:

  • Стрелки ← и → изменяют текущую оценку.
  • Tab и Shift+Tab перемещают фокус между интерактивными элементами.

Интеграция с формами

QRating может использоваться в составе форм Quasar и Vue:

Это позволяет использовать QRating для сбора оценок и интеграции с валидацией форм, отправкой на сервер или хранением в локальном состоянии приложения.

Оглавление