GrRating

  • ядро
  • Формы
  • API · 17 props
  • ⌨ клавиши

Берут, когда оценка ставится в один клик.

import { GrRating } from '@feugene/granularity/components/GrRating'

Обзор

Когда брать

  • оценка ставится в один клик — отзыв, качество поддержки, сложность задачи;
  • оценка дробная — allowHalf для половинок;
  • рядом нужна расшифровка — texts подписывает ступени словами: «Плохо», «Отлично»;
  • оценку показывают, а не ставят — readonly для средней оценки в карточке товара.

Когда взять другое

НужноБерите
Шкала числовая и широкаяGrSlider
Нужно точное числоGrNumberInput
Вариантов немного и они названыGrRadioGroup
Показать долю, а не оценкуGrProgressBar

Варианты все тона и виды — настоящим компонентом

tone

  • primary
  • neutral
  • success
  • warning
  • danger
  • info
  • slate
  • azure

Размеры

  • xs
  • sm
  • md
  • lg

Состояния

  • обычная
  • disabled
  • readonly
  • invalid

Матрица живая: наводите и нажимайте. Состояний наведения, фокуса и нажатия здесь нет — они за браузером, а не за пропом.

Playground контролы выводятся из API, а не пишутся руками

Сцена

Загружается…

0 изменено· состояние — в адресе

Примеры 3 у каждого — живое демо и его код

  • Отзыв после доставки

    Оценка — группа переключателей в другом обличье: по ней ходят стрелками, а clearable даёт второму клику по той же звезде забрать ответ. texts называет каждую ступень — «Хорошо», а не просто «4», — и это слово уходит в aria-valuetext.

    How was your order?Linen shirt, sand, M · delivered yesterday
    Choose a star

    Fit, fabric, colour — it helps the next buyer

    0 / 500
  • Оценка разговора с поддержкой

    Слот symbol рисует лица вместо звёзд, а filled подсвечивает все лица до ответа, оставляя остальные серыми. Шкала остаётся группой переключателей для клавиатуры, а texts по-прежнему называет ступени для скринридера.

    DKChat with Daniel · closedAbout: export to CSV cuts long notes
    How did we do?
  • Средние оценки в каталоге

    Чужая средняя — не контрол: readonly убирает шкалу из порядка табуляции и рисует её картинкой. allow-half показывает 4,5 как четыре с половиной звезды, compact убирает пустые — в списке серые звёзды только шумят, — а show-text добавляет число.

    Linen shirt, sand€64.00
    4.5
    42 reviews
    Wool cardigan, navy€129.00
    4
    18 reviews
    Canvas tote€18.00
    3.5
    7 reviews
    Silk scarf, rust€45.00
    5
    3 reviews

API порождается из пакета · разойтись не может

Props

PropTypeпо умолчаниюОписание
disabledboolean | undefinedfalseШкала недоступна: остаётся слайдером с `aria-disabled`, но выходит из таб-порядка и не меняется.
tone
"primary" | "neutral" | "success" | "warning" | "danger" | ""primary" | "neutral" | "success" | "warning" | "danger" | "info" | "slate" | "azure" | undefined
"warning"Тон заливки; точечно перекрывается переменной `--gr-rating-color`.
iconstring | Component | undefinedundefinedСимвол вместо встроенной звезды: Vue-компонент либо класс иконки (`'i-lucide-heart'` — правило для класса заводит приложение: фабрике движка или провайдером, см. `docs/installation.md#иконки`).
readonlyboolean | undefinedfalseТолько показ: без ввода и фокуса.
invalidboolean | undefinedfalseВизуальное и ARIA-состояние ошибки.
requiredboolean | undefinedfalseОбязательное поле (`aria-required`).
size"xs" | "sm" | "md" | "lg" | undefinedundefinedРазмер символов и подписи. Не задан — из `GrConfigProvider`, иначе `md`.
ariaLabelstring | undefinedundefinedДоступное имя шкалы: что оценивают — «Качество доставки». По умолчанию — из локали (`Rating`).
clearableboolean | undefinedfalseПовторный клик по текущей оценке сбрасывает её в `0`.
namestring | undefinedundefinedИмя для нативной формы: hidden input со значением; `0` — «не выбрано», input не рендерится.
maxnumber | undefined5Количество символов шкалы.
compactboolean | undefinedfalseКомпактный вид: рисуются только заполненные символы. Осмысленно вместе с `readonly` — в списках и таблицах пять звёзд в каждой строке съедают ширину.
allowHalfboolean | undefinedfalseПоловинчатые оценки: клик по левой половине символа даёт `.5`.
showTextboolean | undefinedfalseПоказывать числовую подпись справа от шкалы.

Слоты

SlotTypeОписание
symbol{ index: number; filled: boolean; }Свой символ вместо звезды. `filled` — закрашенная половина символа.
text{ value: number; }Подпись рядом с оценкой.

События

EventСигнатураОписание
update:modelValue(event: "update:modelValue", value: number): void—
change(event: "change", value: number): void—
clear(event: "clear"): void—
focus(event: "focus", event: FocusEvent): void—
blur(event: "blur", event: FocusEvent): void—
hoverChange(event: "hoverChange", value: number | null): void—

Методы

MethodsСигнатураОписание
focus() => voidФокус на шкалу из кода. В `readonly` шкала — картинка и фокус не принимает.
blur() => voidСнять фокус со шкалы.

Типы

Все экспортируемые типы подпути, по файлам, где они объявлены. Имена, дженерики и тела читаются из файлов деклараций пакета и разойтись не могут.

Импорт
import type { GrRatingConfigurableProps, GrRatingProps, GrRatingEmits } from '@feugene/granularity/components/GrRating'

Файлdist/types/components/GrRating/config.d.ts

grRatingConfigconst
const grRatingConfig: import("@feugene/granum/contract").GranumComponentDescriptor<"GrRating">;

Файлdist/types/components/GrRating/defaults.d.ts

GrRatingConfigurablePropsinterface

Пропы GrRating, настраиваемые глобально через <GrConfigProvider :component-defaults="{ GrRating: { … } }">. Только оформление — см. GrButton/defaults.ts.

interface GrRatingConfigurableProps {
    size: GrRatingSize;
}

Файлdist/types/components/GrRating/GrRating.vue.d.ts

GrRatingPropsinterface

Публичный GR-примитив «Rating» — шкала оценки символами (по умолчанию звёзды). Интерактивный режим реализует WAI-ARIA slider pattern (role="slider", aria-valuemin/max/now/valuetext, стрелки / Home / End), режим только для чтения — role="img" с текстовой подписью, чтобы скринридер озвучил оценку одной фразой, а не набором элементов. Символ по умолчанию рисуется инлайновым SVG (звезда с fill="currentColor") — иконочные шрифты-маски i-lucide-star дают только контур. Свой символ задаётся пропом icon (Vue-компонент или класс иконки) либо слотом #symbol.

interface GrRatingProps {
    /** Текущая оценка. Дробная (`3.5`) поддерживается при `allowHalf`. */
    modelValue: number;
    /** Количество символов шкалы. */
    max?: number;
    /** Размер символов и подписи. Не задан — из `GrConfigProvider`, иначе `md`. */
    size?: GrRatingSize;
    /** Тон заливки; точечно перекрывается переменной `--gr-rating-color`. */
    tone?: GrRatingTone;
    /** Половинчатые оценки: клик по левой половине символа даёт `.5`. */
    allowHalf?: boolean;
    /** Только показ: без ввода и фокуса. */
    readonly?: boolean;
    /** Шкала недоступна: остаётся слайдером с `aria-disabled`, но выходит из таб-порядка и не меняется. */
    disabled?: boolean;
    /** Визуальное и ARIA-состояние ошибки. */
    invalid?: boolean;
    /** Обязательное поле (`aria-required`). */
    required?: boolean;
    /** Повторный клик по текущей оценке сбрасывает её в `0`. */
    clearable?: boolean;
    /**
     * Символ вместо встроенной звезды: Vue-компонент либо класс иконки
     * (`'i-lucide-heart'` — правило для класса заводит приложение: фабрике движка
     * или провайдером, см. `docs/installation.md#иконки`).
     */
    icon?: string | Component;
    /** Показывать числовую подпись справа от шкалы. */
    showText?: boolean;
    /** Формат подписи. По умолчанию — само значение. Сильнее `texts`. */
    formatText?: (value: number) => string;
GrRatingEmitsinterface
interface GrRatingEmits {
    /** Оценка изменилась (`v-model`); снятая `clearable` оценка приходит как `0`. */
    (e: 'update:modelValue', value: number): void;
    /** Оценка зафиксирована (клик / клавиша). */
    (e: 'change', value: number): void;
    /** Значение под курсором; `null` — курсор ушёл со шкалы. */
    (e: 'hoverChange', value: number | null): void;
    /** Оценка снята повторным кликом; только при `clearable`. */
    (e: 'clear'): void;
    /** Фокус пришёл на шкалу. */
    (e: 'focus', event: FocusEvent): void;
    /** Фокус ушёл со шкалы; предпросмотр под курсором при этом сбрасывается. */
    (e: 'blur', event: FocusEvent): void;
}

Файлdist/types/components/GrRating/grRatingStyles.d.ts

GrRatingSizetype
type GrRatingSize = GrComponentSize;
GrRatingTonetype
type GrRatingTone = GrTone;

Файлdist/types/components/GrRating/safelist.d.ts

grRatingSafelistconst
const grRatingSafelist: string[];

Файлdist/types/components/GrRating/index.d.ts

GrRatingInstancetype
type GrRatingInstance = ComponentExposed<typeof GrRatingComponent>;

Доступность

Паттерн APG

slider (интерактивный) / img (readonly)

Клавиши

→ / ↑← / ↓Home / End

КлавишаДействие
→ / ↑больше
← / ↓меньше
Home / Endк краям

Использование из прозы библиотеки

Оценка словами
vue
<GrRating v-model="score" :texts="['Ужасно', 'Плохо', 'Нормально', 'Хорошо', 'Отлично']" show-text />

texts — по одной подписи на деление. Подпись уходит и в видимый текст, и в aria-valuetext («4 из 5, хорошо»): в этом и смысл рейтинга — диктор читает оценку словами, а не голым числом. Дробное значение округляется вверх до своего деления, массив короче max оставляет верхние деления без подписи.

formatText сильнее texts для видимого текста — у потребителя может быть своя формулировка.

Предпросмотр

Наведение показывает оценку под курсором и эмитит hoverChange; уход со шкалы и потеря фокуса возвращают модель и шлют hoverChange(null).

Обработчик висит на самой шкале, а не на компоненте целиком: подпись лежит рядом со шкалой, и курсор, переведённый на неё, обязан гасить предпросмотр — иначе он залипает. В readonly и disabled предпросмотра нет вовсе.

С клавиатуры предпросмотра не существует: стрелки сразу фиксируют оценку, и hoverChange там не эмитится.

Компактный вид
vue
<GrRating :model-value="3" readonly compact show-text />

compact рисует только заполненные символы — для таблиц и списков, где пять звёзд в каждой строке съедают ширину. Половинка считается символом: «2,5» рисуется тремя. Для диктора компактный режим ничем не отличается — роль и текстовая подпись те же.

Режимы и доступность

Интерактивная шкала реализует slider-паттерн: role="slider", aria-valuemin/max/now/valuetext, стрелки, Home/End. Режим только для чтения — role="img" с текстовой подписью, чтобы оценка читалась одной фразой, а не набором элементов.

disabled гасит шкалу токеном --gr-disabled-fg, а не прозрачностью: opacity разбавляет выверенные на AA цвета.

Оформление
ТочкаЧто задаёт
sizexs…lg, читается из GrConfigProvider
toneцвет заливки из шкалы тонов
--gr-rating-colorцвет заливки точечно, сильнее tone
--gr-rating-void-colorцвет незаполненного символа
icon / слот #symbolсвой символ вместо встроенной звезды

Символ по умолчанию — инлайновый SVG: иконочные маски i-lucide-star дают только контур. Свой символ — Vue-компонент или класс иконки (i-lucide-* — правило для него заводит приложение: фабрике движка или провайдером, иначе — Vue-компонент; см. «Иконки»).

Нативная форма

Проп name рендерит input[type="hidden"] со значением оценки. 0 — «не выбрано»: input не рендерится, как у неотмеченной радиокнопки.