React 色轮颜色选择器

色相沿色轮一周分布，饱和度从圆心向外递增。色轮下方依次是亮度滑块、可选的不透明度滑块和颜色文本输入框。用户凭眼睛挑选颜色时适合用这个模式；需要精确的通道值时，请用滑块。

结构

import { ChromaPanel } from "chroma-panel/panel";
import "chroma-panel/wheel";
 
<ChromaPanel modes={["wheel"]} />;

色盘的尺寸由 --cp-disc-size 控制，用绿色窗口按钮加宽面板时，它也会随之变大。它的默认值以及其他尺寸变量，见用 CSS 变量定制主题。

演示

Hex

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

chroma-panel-wheel-demo.tsx

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

模式 id

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