色盤
固定的 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>頁面較窄時,每列會換行為七欄,色系名稱放在上方。