カラーピッカー

カラーピッカーは、色を選択するための入力コンポーネントです。

インポート #


import ColorPicker from 'primevue/colorpicker';

基本 #

カラーピッカーは、_v-model_ プロパティを使用して制御された入力として使用されます。


<ColorPicker v-model="color" />

インライン #

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


<ColorPicker v-model="color" inline />

フォーマット #

値バインディングで使用するデフォルトの色形式は _hex_ で、_format_ プロパティを使用して _rgb_ と _hsb_ を使用できます。

HEX

6466f1

RGB

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

HSB

{"h":239,"s":59,"b":95}


<ColorPicker v-model="colorHEX" inputId="cp-hex" format="hex" class="mb-4" />
<ColorPicker v-model="colorRGB" inputId="cp-rgb" format="rgb" class="mb-4" />
<ColorPicker v-model="colorHSB" inputId="cp-hsb" format="hsb" class="mb-4" />

無効 #

_disabled_ が存在する場合、要素は編集およびフォーカスできません。


<ColorPicker v-model="color" disabled />

アクセシビリティ #

スクリーンリーダー

仕様では、カラーピッカーはまだカバーされていません。セマンティックなネイティブカラーピッカーの使用はブラウザ間で一貫していないため、現在コンポーネントはスクリーンリーダーと互換性がありません。今後のバージョンでは、スライダーセクションの下にテキストフィールドが導入され、hsl、rgba、および hex 形式のアクセス可能なテキストボックスを使用して色を選択できるようになります。

ポップアップカラーピッカーの閉じた状態のキーボードサポート

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

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

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