CSS: rubric-note ​

div[class~="instui-rubric-note"] — Структурована примітка з категоріями рубрики та індикаторами оцінювання.

✅ Використовуйте Rubric-Note коли:

  • Потрібно показати шкалу оцінювання або критерії оцінювання

  • Потрібно структурувати вміст за категоріями з балами або індикаторами

  • Макет має підкреслювати структуру та ієрархію 🚫 Не використовуйте Rubric-Note коли:

  • Показуєте прості нотатки або коментарі — замість цього використовуйте Callout

  • Потрібна складна логіка оцінювання — розгляньте можливість створення кастомного компоненту

Доступність ​

  • Використовуйте семантику таблиці, якщо показуєте справжню рубрику з рядками та стовпцями
  • Переконайтеся, що індикатори балів не залежать лише від кольору
  • Надайте описові підписи для кожної категорії

Використання ​

css
@import "@pantoken/plugin-layouts/layouts.css";

Приклади ​

Частини ​

ЧастинаОпис
.instui-criteriaКонтейнер для рядків критеріїв рубрики.
.instui-descriptionДетальний опис критерію.
.instui-headerЗаголовок з назвою та метаданими.
.instui-nameНазва або категорія критерію.
.instui-rowОкремий рядок критерію.
.instui-scoreІндикатор або бейдж оцінки.

Стані ​

СтанОпис
:optional—

Використано токенів ​

TokenТипЗначення
--instui-color-background——
--instui-color-border——
--instui-color-info-background——
--instui-color-info-text——
--instui-color-primary——
--instui-color-surface——
--instui-color-text-secondary——
--instui-font-size-small<length>—
--instui-font-weight-semibold——
--instui-radius-medium——
--instui-space-medium——
--instui-space-small——

Пов'язані ​