Vitral 0.2
Formulário

ToggleSwitch

Um interruptor de ligar e desligar sobre um checkbox nativo, com cabeçalho acima e conteúdo de ligado/desligado ao lado.

Testado com WAI-ARIA

Importação

main.ts
import { ToggleSwitch } from '@vitral/vue';

Cabeçalho e estado

Com `show-state-label`, o On/Off do locale aparece ao lado do switch.

<script setup lang="ts">import { ToggleSwitch } from '@vitral/vue';import { ref } from 'vue'; const wifi = ref(true);const bluetooth = ref(false);</script> <template>    <ToggleSwitch v-model="wifi" label="Wi-Fi" show-state-label />    <ToggleSwitch v-model="bluetooth" label="Bluetooth" show-state-label /></template>

Conteúdo personalizado

Um conteúdo exibido ao lado do switch para cada estado. O segundo switch não tem cabeçalho, então recebe nome com aria-label.

<script setup lang="ts">import { ToggleSwitch } from '@vitral/vue';import { ref } from 'vue'; const dark = ref(false);const sync = ref(false);</script> <template>    <ToggleSwitch v-model="dark" label="Appearance" on-label="Dark" off-label="Light" />    <ToggleSwitch v-model="sync" aria-label="Sync" on-label="Syncing" off-label="Paused" /></template>

Estados

<script setup lang="ts">import { ToggleSwitch } from '@vitral/vue';</script> <template>    <ToggleSwitch :model-value="false" label="Invalid" invalid show-state-label />    <ToggleSwitch :model-value="false" label="Disabled" disabled show-state-label />    <ToggleSwitch :model-value="true" label="Disabled on" disabled show-state-label /></template>

API

Lido de packages/vue/src/components/ToggleSwitch/types.ts, então diz o que o componente aceita de fato.

Props

NomeTipoDescrição
labelstringO título acima do switch (o título, não o texto de ligado/desligado); ele é o `<label>` do switch e, portanto, seu nome acessível.
onLabelstringMostrado ao lado do switch enquanto ligado.
offLabelstringMostrado ao lado do switch enquanto desligado.
showStateLabelbooleanMostra o On/Off do locale ao lado do switch quando não há `onLabel`/`offLabel`.
invalidboolean—
disabledboolean—

Mais pt, dt e unstyled de BaseProps; veja pass-through e modo sem estilo.

Emits

EventoPayloadDescrição
changeevent: ToggleSwitchChangeEvent—
focusevent: FocusEvent—
blurevent: FocusEvent—

Slots

NomeProps do slotDescrição
default—Substitui o texto do título.
content(props: { checked: boolean })Substitui o conteúdo de ligado/desligado ao lado do switch.

Usado nestes templates