调色板
固定的 preset 色彩与复制结果反馈。
两个色系
预设调色板
选择色样以复制对应变量。
blue
violet
每个色样在两种主题中均显示相同的固定预设值。
使用于 色彩指南.
用法与接口
DemoPalette 会渲染托盘,展示区内包含 div.ui-palette:每个色系各有一行带名称的 ui-palette-row,每个色阶则有一个 ui-palette-chip 按钮。families 可限定色相。每个色块会复制 var(--color-<family>-<step>),并向共享的 ui-copy-status 行报告结果。
<DemoPalette families={["blue", "violet"]} /><div class="ui-palette"> <div class="ui-palette-row" role="group" aria-label="blue palette"> <span>blue</span> <button type="button" class="ui-palette-chip" aria-label="Copy color-blue-5" style="background-color: …"></button> … </div></div>页面较窄时,每行会换行为七列,色系名称放在上方。