ColorPicker

ColorPickerは色を選択するための入力コンポーネントです。

インポート#


import { ColorPicker } from 'primereact/colorpicker';

基本#

ColorPickerは、valueとonChangeプロパティを持つ制御された入力として使用されます。


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

インライン#

ColorPickerはデフォルトでポップアップとして表示されます。この動作をカスタマイズするには、inlineプロパティを追加します。


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

フォーマット#

値のバインディングで使用するデフォルトの色形式はhexです。他の可能な値は、formatプロパティを使用してrgbとhsbにできます。

HEX

6466f1

RGB

{"r":100,"g":102,"b":241}

HSB

{"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形式でアクセス可能なテキストボックスを使用して色を選択できるように、スライダーセクションの下にテキストフィールドが導入される予定です。

ポップアップColorPickerのクローズ状態でのキーボードサポート

キー	機能
tab	フォーカスをカラーピッカーボタンに移動します。
space	ポップアップを開き、フォーカスをカラースライダーに移動します。

ポップアップキーボードサポート

キー	機能
enter	色を選択してポップアップを閉じます。
space	色を選択してポップアップを閉じます。
escape	ポップアップを閉じ、フォーカスを入力に移動します。

カラーピッカースライダー

キー	機能
矢印キー	色を変更します。

色相スライダー

キー	機能
上矢印下矢印	色相を変更します。