Skip to content

CSS: rubric-note

div[class~="instui-rubric-note"] — Strukturált megjegyzés rubrika kategóriákkal és pontozási jelzőkkel.

✅ Használja a Rubric-Note-ot, ha:

  • Értékelési rubrika vagy értékelési kritériumok megjelenítése
  • A tartalmat kategóriák szerint kell felépítened pontszámokkal vagy jelzőkkel
  • Az elrendezésnek a szerkezetet és a hierarchiát kell hangsúlyoznia 🚫 Ne használd a Rubric-Note-ot, amikor:

Egyszerű jegyzetek vagy megjegyzések megjelenítése — használja helyette a Calloutot Bonyolult értékelési logika szükséges — fontolja meg egy egyedi komponens használatát

Hozzáférhetőség

  • Használjon táblázati szemantikát, ha valódi rubrikát jelenít meg sorokkal és oszlopokkal
  • Gondoskodjon arról, hogy a pontszámjelzők ne csak szín alapján legyenek értelmezhetők
  • Adj leíró címkéket minden kategóriához

Használat

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

Részek

RészLeírás
.instui-criteriaKonténer a rubrika kritérium soraihoz.
.instui-descriptionA kritérium részletes leírása.
.instui-headerFejléc címvel és metaadatokkal.
.instui-nameKritérium neve vagy kategóriája.
.instui-rowEgyéni kritérium sor.
.instui-scorePontszámjelző vagy jelvény.

Állapotok

ÁllapotLeírás
:optional

Fogyasztott tokenek

TokenTípusÉrték
--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

Kapcsolódó