Skip to content

CSS: rubric-note ​

div[class~="instui-rubric-note"] — ملاحظة مُنظَّمة مع فئات معايير ونماذج تقييم ومؤشرات تسجيل.

✅ استخدم Rubric-Note عندما:

  • عرض جدول تقييم أو معايير التقييم

  • تحتاج إلى هيكلة المحتوى حسب الفئات مع درجات أو مؤشرات

  • يجب أن يركّز التخطيط على البنية والتسلسل الهرمي 🚫 لا تستخدم Rubric-Note عندما:

  • عرض ملاحظات بسيطة أو تعليقات — استخدم Callout بدلاً من ذلك

  • هناك حاجة إلى منطق تقييم معقد — فكر في مكوّن مخصص

Accessibility ​

  • استخدم دلالات الجدول عند عرض جدول تقييم حقيقي يحتوي على صفوف وأعمدة
  • تأكد من أن مؤشرات الدرجات ليست معتمدة على اللون فقط
  • قدّم تسميات وصفية لكل فئة

Usage ​

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

Parts ​

PartDescription
.instui-criteriaحاوية لصفوف معايير الجدول.
.instui-descriptionوصف مفصل للمقياس أو المعيار.
.instui-headerرأس يحتوي على العنوان والبيانات الوصفية.
.instui-nameاسم المعيار أو الفئة.
.instui-rowصف مقياس فردي.
.instui-scoreمؤشر الدرجة أو الشارة.

States ​

StateDescription
:optional—

Tokens consumed ​

TokenTypeValue
--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——