網站導覽

元件

色盤

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

頁面較窄時,每列會換行為七欄,色系名稱放在上方。