選擇按鈕

選擇按鈕用於從按鈕清單中選擇單個或多個項目。

匯入 #


import SelectButton from 'primevue/selectbutton';

基本 #

選擇按鈕與v-model屬性一起使用，用於雙向值綁定以及options集合。選項的標籤和值分別使用optionLabel和optionValue屬性定義。請注意，當選項是簡單的原始值（例如字串陣列）時，不需要optionLabel和optionValue。


<SelectButton v-model="value" :options="options" />

表單 #

選擇按鈕與PrimeVue 表單程式庫無縫整合。


<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
    <div class="flex flex-col gap-1">
        <SelectButton name="selection" :options="options" />
        <Message v-if="$form.selection?.invalid" severity="error">{{ $form.selection.error?.message }}</Message>
    </div>
    <Button type="submit" severity="secondary" label="Submit" />
</Form>

多重 #

選擇按鈕預設允許僅選擇一個項目，並且設定multiple選項可以選擇多個項目。在多重選擇的情況下，模型屬性應該是一個陣列。


<SelectButton v-model="value" :options="options" optionLabel="name" multiple aria-labelledby="multiple" />

範本 #

選項的標籤預設用作項目的顯示文字，若要支援自訂內容，請定義一個option範本，該範本會將選項實例作為參數。


<SelectButton v-model="value" :options="options" optionLabel="value" dataKey="value" aria-labelledby="custom">
    <template #option="slotProps">
        <i :class="slotProps.option.icon"></i>
    </template>
</SelectButton>

尺寸 #

選擇按鈕提供small和large尺寸作為基礎尺寸的替代方案。


<SelectButton v-model="value1" :options="options" size="small" />
<SelectButton v-model="value2" :options="options" />
<SelectButton v-model="value3" :options="options" size="large" />

無效 #

使用invalid屬性顯示無效狀態，以表示驗證失敗。當與表單驗證程式庫整合時，可以使用此樣式。


<SelectButton v-model="value" :options="options" aria-labelledby="basic" allowEmpty :invalid="value === null"  />

已停用 #

當存在disabled時，元素將完全無法編輯和聚焦。也可以使用optionDisabled屬性停用某些選項。


<SelectButton v-model="value" :options="options" disabled />
<SelectButton v-model="value" :options="options2" optionDisabled="constant" optionLabel="name" />

協助工具 #

螢幕閱讀器

選擇按鈕元件在內部使用切換按鈕，並具有group角色。可以用aria-labelledby屬性提供描述元件的值。

鍵盤支援

鍵盤互動源自瀏覽器對群組中核取方塊的處理。

按鍵	功能
tab	將焦點移至頁面 Tab 順序中的下一個可聚焦元素。
shift + tab	將焦點移至頁面 Tab 順序中的上一個可聚焦元素。
space	切換按鈕的勾選狀態。