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

ที่เกี่ยวข้อง ​