GrRating
Берут, когда оценка ставится в один клик.
Обзор
Когда брать
- оценка ставится в один клик — отзыв, качество поддержки, сложность задачи;
- оценка дробная —
allowHalfдля половинок; - рядом нужна расшифровка —
textsподписывает ступени словами: «Плохо», «Отлично»; - оценку показывают, а не ставят —
readonlyдля средней оценки в карточке товара.
Когда взять другое
| Нужно | Берите |
|---|---|
| Шкала числовая и широкая | GrSlider |
| Нужно точное число | GrNumberInput |
| Вариантов немного и они названы | GrRadioGroup |
| Показать долю, а не оценку | GrProgressBar |
Варианты все тона и виды — настоящим компонентом
tone
primaryneutralsuccesswarningdangerinfoslateazure
Размеры
xssmmdlg
Состояния
обычнаяdisabledreadonlyinvalid
Матрица живая: наводите и нажимайте. Состояний наведения, фокуса и нажатия здесь нет — они за браузером, а не за пропом.
Playground контролы выводятся из API, а не пишутся руками
Загружается…
0 изменено· состояние — в адресе
<GrRating v-model="value" />Примеры 3 у каждого — живое демо и его код
Отзыв после доставки
Оценка — группа переключателей в другом обличье: по ней ходят стрелками, а
clearableдаёт второму клику по той же звезде забрать ответ.textsназывает каждую ступень — «Хорошо», а не просто «4», — и это слово уходит вaria-valuetext.How was your order?Linen shirt, sand, M · delivered yesterday Fit, fabric, colour — it helps the next buyer
0 / 500Оценка разговора с поддержкой
Слот
symbolрисует лица вместо звёзд, аfilledподсвечивает все лица до ответа, оставляя остальные серыми. Шкала остаётся группой переключателей для клавиатуры, аtextsпо-прежнему называет ступени для скринридера.DKChat with Daniel · closedAbout: export to CSV cuts long notesHow did we do?Средние оценки в каталоге
Чужая средняя — не контрол:
readonlyубирает шкалу из порядка табуляции и рисует её картинкой.allow-halfпоказывает 4,5 как четыре с половиной звезды,compactубирает пустые — в списке серые звёзды только шумят, — аshow-textдобавляет число.Linen shirt, sand€64.0042 reviews4.5Wool cardigan, navy€129.0018 reviews4Canvas tote€18.007 reviews3.5Silk scarf, rust€45.003 reviews5
API порождается из пакета · разойтись не может
Props
| Prop | Type | по умолчанию | Описание |
|---|---|---|---|
disabled | boolean | undefined | false | Шкала недоступна: остаётся слайдером с `aria-disabled`, но выходит из таб-порядка и не меняется. |
tone |
| "warning" | Тон заливки; точечно перекрывается переменной `--gr-rating-color`. |
icon | string | Component | undefined | undefined | Символ вместо встроенной звезды: Vue-компонент либо класс иконки (`'i-lucide-heart'` — правило для класса заводит приложение: фабрике движка или провайдером, см. `docs/installation.md#иконки`). |
readonly | boolean | undefined | false | Только показ: без ввода и фокуса. |
invalid | boolean | undefined | false | Визуальное и ARIA-состояние ошибки. |
required | boolean | undefined | false | Обязательное поле (`aria-required`). |
size | "xs" | "sm" | "md" | "lg" | undefined | undefined | Размер символов и подписи. Не задан — из `GrConfigProvider`, иначе `md`. |
ariaLabel | string | undefined | undefined | Доступное имя шкалы: что оценивают — «Качество доставки». По умолчанию — из локали (`Rating`). |
clearable | boolean | undefined | false | Повторный клик по текущей оценке сбрасывает её в `0`. |
name | string | undefined | undefined | Имя для нативной формы: hidden input со значением; `0` — «не выбрано», input не рендерится. |
max | number | undefined | 5 | Количество символов шкалы. |
compact | boolean | undefined | false | Компактный вид: рисуются только заполненные символы. Осмысленно вместе с `readonly` — в списках и таблицах пять звёзд в каждой строке съедают ширину. |
allowHalf | boolean | undefined | false | Половинчатые оценки: клик по левой половине символа даёт `.5`. |
showText | boolean | undefined | false | Показывать числовую подпись справа от шкалы. |
formatText | ((value: number) => string) | undefined | undefined | Формат подписи. По умолчанию — само значение. Сильнее `texts`. |
texts | string[] | undefined | undefined | Подписи по делениям: «3 из 5, нормально» вместо «3 из 5». Уходят и в видимый текст, и в `aria-valuetext` — ради этого рейтинг и существует. Массив короче `max` оставляет верхние деления без подписи. |
modelValueобязательныйv-model | number | — | Текущая оценка. Дробная (`3.5`) поддерживается при `allowHalf`. |
Слоты
| Slot | Type | Описание |
|---|---|---|
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
const grRatingConfig: import("@feugene/granum/contract").GranumComponentDescriptor<"GrRating">;Файлdist/types/components/GrRating/defaults.d.ts
Пропы GrRating, настраиваемые глобально через
<GrConfigProvider :component-defaults="{ GrRating: { … } }">.
Только оформление — см. GrButton/defaults.ts.
interface GrRatingConfigurableProps {
size: GrRatingSize;
}Файлdist/types/components/GrRating/GrRating.vue.d.ts
Публичный 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;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
type GrRatingSize = GrComponentSize;type GrRatingTone = GrTone;Файлdist/types/components/GrRating/safelist.d.ts
const grRatingSafelist: string[];Файлdist/types/components/GrRating/index.d.ts
type GrRatingInstance = ComponentExposed<typeof GrRatingComponent>;Доступность
Паттерн APG
slider (интерактивный) / img (readonly)
Клавиши
→ / ↑← / ↓Home / End
| Клавиша | Действие |
|---|---|
| → / ↑ | больше |
| ← / ↓ | меньше |
| Home / End | к краям |
Полный контракт пакета: docs/keyboard.md ↗
Использование из прозы библиотеки
Оценка словами
<GrRating v-model="score" :texts="['Ужасно', 'Плохо', 'Нормально', 'Хорошо', 'Отлично']" show-text />texts — по одной подписи на деление. Подпись уходит и в видимый текст, и в
aria-valuetext («4 из 5, хорошо»): в этом и смысл рейтинга — диктор читает
оценку словами, а не голым числом. Дробное значение округляется вверх до своего
деления, массив короче max оставляет верхние деления без подписи.
formatText сильнее texts для видимого текста — у потребителя может быть своя
формулировка.
Предпросмотр
Наведение показывает оценку под курсором и эмитит hoverChange; уход со шкалы
и потеря фокуса возвращают модель и шлют hoverChange(null).
Обработчик висит на самой шкале, а не на компоненте целиком: подпись лежит рядом
со шкалой, и курсор, переведённый на неё, обязан гасить предпросмотр — иначе он
залипает. В readonly и disabled предпросмотра нет вовсе.
С клавиатуры предпросмотра не существует: стрелки сразу фиксируют оценку, и
hoverChange там не эмитится.
Компактный вид
<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 цвета.
Оформление
| Точка | Что задаёт |
|---|---|
size | xs…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 не рендерится, как у неотмеченной радиокнопки.
Пропы этого примера