颜色字段

颜色字段

color 字段在 repeater 行内存储受控的颜色值。

适用场景

  • 徽章颜色
  • 强调色样本
  • 图表图例颜色
  • 每项简单的视觉标记

Schema 示例

{ "name": "accentColor", "label": "Accent Color", "type": "color" }

模板用法

{{#each stats as="item"}}
  <span class="stat-dot" style="background-color: {{ item.accentColor }};"></span>
{{/each}}

变体示例:

{{#each badges as="item"}}
  <span class="badge" style="border-color: {{ item.accentColor }};">
    {{ item.label }}
  </span>
{{/each}}

何时使用

当每个重复项需要一个编辑器可以安全控制的轻量视觉值时,使用 color

不适用情况

在以下情况不要使用 color

  • 颜色应通过设计代币在全局强制执行
  • 值应从一小组命名集合中选择,而不是使用自由颜色输入

改用 select 或共享的样式系统。

技术说明

  • color 保持在受控的重复结构内,不要用作全局设计代币的替代
  • 当项级变体是有意且有限时使用它
  • 当一致性比自由颜色选择更重要时,优先通过 select 使用命名变体
  • 在仅依赖颜色传达含义之前,请审查可访问性影响

相关