開關切換

開關切換用於選擇布林值。

導入 #


import ToggleSwitch from 'primevue/toggleswitch';

基本 #

開關切換搭配 v-model 屬性使用，以進行雙向值綁定。


<ToggleSwitch v-model="checked" />

表單 #

開關切換與 PrimeVue 表單程式庫無縫整合。


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

預選 #

啟用 checked 屬性會將元件顯示為初始啟用狀態。


<ToggleSwitch v-model="checked" />

無效 #

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


<ToggleSwitch v-model="checked" :invalid="!checked" />

範本 #

可以使用 handle 插槽顯示自訂內容。


<ToggleSwitch v-model="checked">
    <template #handle="{ checked }">
        <i :class="['!text-xs pi', { 'pi-check': checked, 'pi-times': !checked }]" />
    </template>
</ToggleSwitch>

已停用 #

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


<ToggleSwitch v-model="checked" disabled />

協助工具 #

螢幕閱讀器

開關切換元件內部使用具有 switch 角色的隱藏原生核取方塊元素，該元素僅對螢幕閱讀器可見。描述元件的值可以透過結合 id 屬性的 label 標籤提供，或者使用 aria-labelledby、aria-label 屬性。


<label for="switch1">Remember Me</label>
<ToggleSwitch inputId="switch1" />

<span id="switch2">Remember Me</span>
<ToggleSwitch aria-labelledby="switch2" />

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

鍵盤支援

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