ToggleButton

切換按鈕用於使用按鈕選擇布林值。

導入 #


import ToggleButton from 'primevue/togglebutton';

基本 #

切換按鈕與 v-model 屬性一起使用，用於雙向值綁定。


<ToggleButton v-model="checked" onLabel="On" offLabel="Off" />

表單 #

切換按鈕與 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-1">
        <ToggleButton name="consent" class="w-48" onLabel="Accept All" offLabel="Reject All" />
        <Message v-if="$form.consent?.invalid" severity="error" variant="simple">{{ $form.consent.error?.message }}</Message>
    </div>
    <Button type="submit" severity="secondary" label="Submit" />
</Form>

自訂 #

可以使用 onLabel、offLabel、onIcon 和 offIcon 屬性自訂圖示和標籤。


<ToggleButton v-model="checked" onLabel="Locked" offLabel="Unlocked" onIcon="pi pi-lock" 
    offIcon="pi pi-lock-open" class="w-36" aria-label="Do you confirm" />

大小 #

切換按鈕提供 small 和 large 大小作為基礎的替代方案。


<ToggleButton v-model="value1" onLabel="On" offLabel="Off" size="small" class="min-w-16" />
<ToggleButton v-model="value2" onLabel="On" offLabel="Off" class="min-w-20" />
<ToggleButton v-model="value3" onLabel="On" offLabel="Off" size="large" class="min-w-24" />

無效 #

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


<ToggleButton v-model="checked" onIcon="pi pi-check" offIcon="pi pi-times" :invalid="!checked" class="w-full sm:w-40" aria-label="Confirmation" />

已停用 #

當存在 disabled 時，無法編輯和聚焦該元素。


<ToggleButton v-model="checked" disabled onIcon="pi pi-check" offIcon="pi pi-times"
    class="w-full sm:w-40" aria-label="Confirmation" />

無障礙 #

螢幕閱讀器

切換按鈕元件在內部使用原生按鈕元素作為僅對螢幕閱讀器可見的切換元素。可以使用 aria-labelledby 或 aria-label 屬性定義描述元件的值，強烈建議使用其中一個屬性，因為元件會變更顯示的標籤，這會導致螢幕閱讀器在元件收到焦點時讀取不同的標籤。為了防止這種情況，請務必提供一個與狀態無關且不會變更的 aria 標籤。


<span id="rememberme">Remember Me</span>
<ToggleButton aria-labelledby="rememberme" />

<ToggleButton aria-label="Remember Me" />

鍵盤支援

鍵盤互動是從瀏覽器對群組中核取方塊的原生處理方式衍生而來。

按鍵	功能
tab	將焦點移至按鈕。
space	切換勾選狀態。