React RGB、RGBA 与 HSL 颜色选择器

滑块模式用于编辑 RGB、HSL 和 HSB（HSV）通道。每个通道都有一个滑块，外加一个用来输入精确值的数值框。用顶部的切换控件可以切换颜色模型。如果你的应用不接受透明色，请设置 showAlpha={false}。

结构

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

每一行都是一个 ChannelSlider，底层是真正的 <input type="range">，所以键盘和屏幕阅读器的行为都由浏览器提供。

演示

Hex

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

chroma-panel-sliders-demo.tsx

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

模式 id

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