颜色字段
颜色字段
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使用命名变体 - 在仅依赖颜色传达含义之前,请审查可访问性影响