开关按钮

开关按钮用于使用按钮选择布尔值。

导入 #


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" />

无障碍 #

屏幕阅读器

开关按钮组件在内部使用一个原生的 button 元素作为开关元素，该元素仅对屏幕阅读器可见。可以使用 aria-labelledby 或 aria-label 属性定义描述组件的值，强烈建议使用其中一个属性，因为组件会更改显示的标签，这将导致屏幕阅读器在组件获得焦点时读取不同的标签。为了防止这种情况，请始终提供一个不随状态变化的 aria 标签。


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

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

键盘支持

键盘交互源自浏览器对组中复选框的本机处理。

键	功能
tab	将焦点移动到按钮。
空格	切换选中状态。