自定义颜色选择器模式

自定义模式会在内置模式旁边添加一个标签页。一个模式包含 id、label、icon 和 Panel 组件。注册一次，再把它的 id 列入 modes 即可；也可以直接传入模式对象。无法识别的 id 会被跳过，并在开发环境下输出警告。

注册

import { registerMode, ChromaPanel } from "chroma-panel";
 
registerMode({
  id: "brand",
  label: "Brand colors",
  icon: BrandIcon,
  Panel: BrandPanel, // reads the color with usePanel()
});
 
<ChromaPanel modes={["wheel", "brand"]} />;

在 BrandPanel 里，用 usePanel() 读取和更新颜色，并直接使用面板自带的控件，如 ColorArea、Swatch 等。

向模式传入 props

modeProps 以模式 id 为键，每个值会传给对应模式的面板组件：

<ChromaPanel modeProps={{ brand: { team: "design" } }} />

API 参考

function registerMode(mode: PickerMode): void

Adds a mode so it can be named in the modes prop. A mode is plain data, so registering one changes no existing file.

function getMode(id: string): PickerMode | undefined

Looks up a registered mode by id.

function resolveModes(requested: readonly (string | PickerMode)[]): PickerMode[]

Turns the modes prop — a mix of ids and mode objects — into the modes to render, in order.