Перейти к содержимому

CoreRating

Примеры использования и документация.

Оценка по шкале звёзд: одним кликом или стрелкой пользователь выражает впечатление, а hover заранее показывает, что получится. Отзывы о товарах, контенте и качестве сервиса; в readonly — компактный показ уже выставленной оценки. Иконка любая: звезда из коллекции проекта или сердце из Iconify.

Интерактив — один слайдер по APG: фокус и клавиатура живут на контейнере (←→↑↓ — ±1, Home/End — края шкалы), aria-valuetext объявляет значение словами («3 из 5»); клик/тап по иконке — быстрый путь для мыши, а повторный клик по текущей последней снимает её — стандарт UX рейтингов. Hover-превью подсвечивает иконки до наведённой, не трогая модель.

Readonly — role="img" с локализованной подписью («Оценка: N из M») и нейтральным цветом без выделения. flow — активные иконки наполняются переливающимся градиентом по фазам: градиент «плывёт» по ряду, а не мигает синхронно; в readonly — статичный градиент вместо нейтрального цвета. jsonLd — opt-in эмиссия schema.org AggregateRating в head: ratingCount обязателен для валидности у Google, id связывает с родительской сущностью; узел эмитится только при рейтинге > 0, несколько рейтингов на странице не конфликтуют (уникальные ключи).

Звёзды — интерактив и readonly (readonly нейтральный, без цветового выделения)

интерактив: 3 — стрелки ←→/↑↓ и Home/End на фокусе, клик по текущей последней снимает

readonly · нейтральный цвет · gap 4

readonly · size 14

color — цвет активных иконок

color="success"

color="danger"

color="info"

color="secondary"

flow — активные иконки наполняются анимированным градиентом

interactive · пара по умолчанию

своя пара --rating-flow-a/-b

--rating-flow-image · мультистоп

--rating-flow-image · readonly

readonly + flow (вместо нейтрального)

Разные иконки Iconify

сложность: 2 из 3

lucide:thumbs-up · readonly

mdi:ghost · readonly · size 24