ColorPicker

ColorPicker 是一個用於選擇顏色的輸入元件。

匯入 #


import ColorPicker from 'primevue/colorpicker';

基本 #

ColorPicker 使用 v-model 屬性進行雙向值綁定。


<ColorPicker v-model="color" />

表單 #

ColorPicker 與 PrimeVue 表單函式庫無縫整合。


<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
    <div class="flex flex-col items-center gap-2">
        <ColorPicker name="color" />
        <Message v-if="$form.color?.invalid" severity="error" size="small" variant="simple">{{ $form.color.error?.message }}</Message>
    </div>
    <Button type="submit" severity="secondary" label="Submit" />
</Form>

內嵌 #

ColorPicker 預設顯示為彈出視窗，新增 inline 屬性可自訂此行為。


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

格式 #

在值綁定中使用的預設顏色格式是 hex，其他可能的值可以是 rgb 和 hsb，使用 format 屬性。

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 格式的可存取文字框來選取顏色。

彈出式 ColorPicker 的關閉狀態鍵盤支援

按鍵	功能
tab	將焦點移至顏色選擇器按鈕。
space	開啟彈出視窗，並將焦點移至顏色滑桿。

彈出視窗鍵盤支援

按鍵	功能
enter	選取顏色並關閉彈出視窗。
space	選取顏色並關閉彈出視窗。
escape	關閉彈出視窗，將焦點移至輸入欄位。

顏色選擇器滑桿

按鍵	功能
方向鍵	變更顏色。

色調滑桿

按鍵	功能
上方向鍵下方向鍵	變更色調。