Raccourci clavier : Ctrl + K
Commencer

Interrupteur

Un réglage qui prend effet immédiatement. Il est annoncé avec role="switch", si bien qu'un lecteur d'écran dit activé ou désactivé plutôt que coché, et c'est toute la raison pour laquelle ce n'est pas une case à cocher.

Utilisation

vue
<script setup lang="ts">
import { ref } from 'vue'
import { VSwitch } from 'vectis-ui'

const notifications = ref(true)
</script>

<template>
  <VSwitch v-model="notifications">Notifications</VSwitch>
</template>

Exemples

Aide

label écrit le texte à côté de l'interrupteur, et le slot par défaut le remplace. hint ajoute une légende en dessous, reliée à l'interrupteur par aria-describedby : c'est là qu'un réglage dit ce que l'activer change.

vue
Joins known networks automatically.Visible to nearby devices while on.
<script setup lang="ts">
import { ref } from 'vue'
import { VSwitch } from 'vectis-ui'

const wifi = ref(true)
const bluetooth = ref(false)
</script>

<template>
  <div class="stack">
    <VSwitch v-model="wifi" label="Wi-Fi" hint="Joins known networks automatically." />
    <VSwitch v-model="bluetooth" label="Bluetooth" hint="Visible to nearby devices while on." />
  </div>
</template>

<style scoped>
.stack {
  display: grid;
  justify-items: start;
  gap: var(--vectis-space-3);
}
</style>

Position du libellé

labelPosition place le libellé avant l'interrupteur plutôt qu'après.

vue
<script setup lang="ts">
import { VSwitch } from 'vectis-ui'
</script>

<template>
  <div class="stack">
    <VSwitch>Label after the switch, the default</VSwitch>
    <VSwitch label-position="start">Label before the switch</VSwitch>
  </div>
</template>

<style scoped>
/* `justify-items: start` keeps each row as wide as its own label: the clickable area is
   the whole <label>, so a stretched row would be clickable well past its text. */
.stack {
  display: grid;
  justify-items: start;
  gap: var(--vectis-space-3);
}
</style>

Écartement

spread prend toute la largeur offerte et pousse le libellé et l'interrupteur aux deux extrémités de la ligne.

vue
<script setup lang="ts">
import { ref } from 'vue'
import { VSwitch } from 'vectis-ui'

const digest = ref(true)
const twoFactor = ref(false)
</script>

<template>
  <div class="settings">
    <VSwitch v-model="digest" spread>Weekly digest</VSwitch>
    <VSwitch v-model="twoFactor" spread label-position="start">Two-factor authentication</VSwitch>
  </div>
</template>

<style scoped>
/* A spread row takes the width it is given, so the panel is what decides how far apart
   the label and the switch end up. */
.settings {
  display: grid;
  gap: var(--vectis-space-3);
  inline-size: 100%;
  max-inline-size: 24rem;
  padding: var(--vectis-space-4);
  border: 1px solid var(--vectis-color-border);
  border-radius: var(--vectis-radius-surface);
}
</style>

Lecture seule

readonly montre le réglage sans permettre de le changer : un clic ou la barre d'espace sont annulés. L'interrupteur reste focalisable, s'envoie avec son formulaire et est annoncé en lecture seule. Il le dit à l'écran dans les deux positions : allumé il échange l'accent contre la couleur sourde, éteint il se creuse derrière un filet.

vue
<script setup lang="ts">
import { ref } from 'vue'
import { VSwitch } from 'vectis-ui'

const on = ref(true)
const off = ref(false)
</script>

<template>
  <div class="stack">
    <VSwitch v-model="on" readonly label="Managed by your administrator" />
    <VSwitch v-model="off" readonly label="Locked until the next billing period" />
  </div>
</template>

<style scoped>
.stack {
  display: grid;
  justify-items: start;
  gap: var(--vectis-space-3);
}
</style>

Désactivé

disabled empêche de basculer l'interrupteur et le grise par les tokens de couleur, allumé comme éteint. Le clavier l'enjambe.

vue
<script setup lang="ts">
import { ref } from 'vue'
import { VSwitch } from 'vectis-ui'

const off = ref(false)
const on = ref(true)
</script>

<template>
  <div class="stack">
    <VSwitch v-model="off" disabled>Off, and cannot be turned on</VSwitch>
    <VSwitch v-model="on" disabled>On, and cannot be turned off</VSwitch>
  </div>
</template>

<style scoped>
.stack {
  display: grid;
  justify-items: start;
  gap: var(--vectis-space-3);
}
</style>

API

Props

PropTypeDéfaut
labelstringaucune
Le texte à côté de l'interrupteur, qui le nomme. Le slot par défaut le remplace.
hintstringaucune
Une ligne d'aide sous le libellé. Elle est reliée à l'interrupteur pour les technologies d'assistance, qui la lisent après le libellé et non comme une partie de celui-ci.
labelPositionSwitchLabelPosition'start' | 'end''end'
De quel côté de l'interrupteur se place le libellé.
spreadbooleanfalse
Pousse le libellé et l'interrupteur aux extrémités opposées de la ligne, si bien qu'une colonne de réglages aligne ses interrupteurs le long d'un bord.
invalidbooleanfalse
Marque le champ comme invalide, ce qui cercle la piste et le signale aux technologies d'assistance. À utiliser pour une règle que le navigateur ne sait pas vérifier ; la validité native est déjà prise en charge sans ça.
disabledbooleanfalse
Rend l'interrupteur inutilisable. Il se grise par les tokens de couleur plutôt que par l'opacité, ce qui le garde lisible sur n'importe quelle surface.
readonlybooleanfalse
Montre le réglage sans permettre de le changer. L'interrupteur reste focalisable, est annoncé en lecture seule et s'envoie toujours avec son formulaire ; un clic ou la barre d'espace ne changent simplement rien.
v-modelbooleanfalse
Si l'interrupteur est activé. La valeur est liée à un vrai <input type="checkbox"> masqué, donc elle s'envoie avec le formulaire comme n'importe quel autre champ.

Slots

SlotType
default{}
Le libellé, quand il demande plus que le texte de la prop label, un lien ou une emphase. Il se trouve à l'intérieur du <label>, donc cliquer les mots bascule l'interrupteur.

Variables CSS

TokenValeur
--vectis-control-size-switch-w2.5rem
--vectis-control-size-switch-h1.25rem
--vectis-control-size-switch-pad0.125rem