网站导航

组件

调色板

固定的 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>

页面较窄时,每行会换行为七列,色系名称放在上方。