React 色块与调色板选择器

调色板模式按分组展示可搜索的色块，可以按颜色名称或 hex 值搜索。传入 palettes 可以使用品牌色或设计系统颜色；不传则使用 Basic、Spectrum 和 Greyscale 这几组内置颜色。每个色块都是一个按钮，当前颜色会标记为选中状态。

结构

import { ChromaPanel } from "chroma-panel/panel";
import "chroma-panel/palettes";
 
<ChromaPanel
  modes={["palettes"]}
  palettes={[{ name: "Brand", colors: ["#3366cc", "#cc3366"] }]}
/>;

不传 palettes 就会使用内置颜色集。如果想在它的基础上扩展而不是替换，可以从 chroma-panel 调用 defaultPalettes()，再加上你自己的颜色：

import { ChromaPanel, defaultPalettes } from "chroma-panel";
 
<ChromaPanel
  modes={["palettes"]}
  palettes={[
    { name: "Brand", colors: ["#3366cc", "#cc3366"] },
    ...defaultPalettes(),
  ]}
/>;

defaultPalettes 只从主入口 chroma-panel 导出，而这个入口会注册全部五种模式。

列表较长时，会在面板为模式预留的高度内滚动。要修改这个高度，或者让面板随内容增高，请参阅让面板适应容器。

演示

Basic

Spectrum

Greyscale

正在加载在线示例，代码在下方。

chroma-panel-palettes-demo.tsx

"use client";
 
import { ChromaPanel } from "chroma-panel";
 
export default function ChromaPanelPalettesDemo() {
  return (
    <ChromaPanel
      defaultValue="#3366cc"
      modes={["palettes"]}
      showTitleBar={false}
      injectStyles={false}
    />
  );
}

模式 id

'palettes'。把它加入 modes 就会显示这个标签页，标签页的顺序与它们在 modes 中的顺序一致。