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

相关 ​