颜色选择器

ColorPicker 是一个用于选择颜色的输入组件。


import { ColorPicker } from 'primereact/colorpicker';
         

ColorPicker 作为受控输入组件使用,通过 valueonChange 属性进行控制。


<ColorPicker value={color} onChange={(e) => setColor(e.value)} />

         

ColorPicker 默认显示为弹出框,添加 inline 属性可自定义此行为。


<ColorPicker value={color} onChange={(e) => setColor(e.value)} inline />
         

在值绑定中使用的默认颜色格式是 hex,其他可能的值可以使用 format 属性设置为 rgbhsb

6466f1
{"r":100,"g":102,"b":241}
{"h":239,"s":59,"b":95}

<ColorPicker format="hex" value={colorHEX} onChange={(e) => setColorHEX(e.value)} />
<ColorPicker format="rgb" value={colorRGB} onChange={(e) => setColorRGB(e.value)} />
<ColorPicker format="hsb" value={colorHSB} onChange={(e) => setColorHSB(e.value)} />
         

当存在 disabled 属性时,元素不能被编辑和聚焦。


<ColorPicker disabled />
         

屏幕阅读器

规范尚未涵盖颜色选择器 ,并且使用语义原生的颜色选择器在不同浏览器中不一致,因此目前该组件与屏幕阅读器不兼容。在即将发布的版本中,将在滑块部分下方引入文本字段,以便能够使用 hsl、rgba 和 hex 格式的可访问文本框选择颜色。

弹出颜色选择器的关闭状态键盘支持

按键功能
tab将焦点移动到颜色选择器按钮。
空格键打开弹出窗口并将焦点移动到颜色滑块。

弹出窗口键盘支持

按键功能
回车键选择颜色并关闭弹出窗口。
空格键选择颜色并关闭弹出窗口。
esc键关闭弹出窗口,将焦点移动到输入框。

颜色选择器滑块

按键功能
方向键更改颜色。

色调滑块

按键功能
上箭头下箭头更改色调。