Skip to content

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

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