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

相關 ​