SSwitch <s-switch>

Un interrupteur qui active ou désactive un paramètre. SSwitch est le wrapper Vue 3 typé du web component <s-switch> de Shopify Polaris.

import { SSwitch } from 'polaris-vue-elements'

Bonnes pratiques

• N'associez pas les interrupteurs à un bouton d'enregistrement. Un interrupteur prend effet dès qu'il est basculé : ajouter un bouton d'enregistrement laisse les marchands dans le doute quant au moment où leur modification s'applique réellement.
• Rendez le paramètre évident. Rédigez un label qui indique aux marchands ce que contrôle l'interrupteur et ce que signifient activé et désactivé, pour qu'ils n'aient pas à le basculer juste pour le découvrir.
• Décrivez les conséquences. Utilisez details pour expliquer ce qui change lorsque l'interrupteur est basculé, en particulier pour les paramètres qui touchent des fonctionnalités ou des données importantes, afin que les marchands décident en toute confiance.
• Regroupez et ordonnez les interrupteurs liés. Lorsqu'une page comporte plusieurs interrupteurs, gardez les paramètres liés ensemble dans un ordre logique pour que les marchands puissent les trouver et les configurer facilement.
• Expliquez pourquoi un interrupteur est indisponible. Lorsqu'un interrupteur est disabled en raison de permissions, de dépendances ou des limites d'un forfait, dites aux marchands pourquoi, si c'est temporaire et ce qu'ils doivent faire pour le débloquer.

<SSwitch label="Send order confirmation emails" details="Customers get an email as soon as they place an order." />

Consultez les bonnes pratiques de Shopify pour <s-switch> (en anglais) pour l'ensemble des recommandations.

Exemple

On: false

<script setup>
import { ref } from 'vue'
import { SSwitch } from 'polaris-vue-elements'

const value = ref(false)
</script>

<template>
  <SSwitch label="Enable notifications" v-model="value" />
  <p>On: {{ value }}</p>
</template>

v-model

v-model sur <SSwitch> est lié à la propriété checked et écoute l'event DOM change.

<SSwitch v-model="value" />

équivaut à :

<SSwitch :checked="value" @change="value = $event.target.checked" />

Props

Prop	Type	Description
accessibilityLabel	string	Un libellé destiné aux utilisateurs de technologies d'assistance comme les lecteurs d'écran. Lorsqu'il est défini, les enfants ou le label fournis ne sont pas annoncés. Il permet aussi d'afficher un contrôle sans libellé visible, tout en apportant du contexte aux utilisateurs de lecteurs d'écran.
checked	boolean	Indique si le contrôle est actif.
defaultChecked	boolean	Indique si le contrôle est actif par défaut.
details	any	Texte supplémentaire apportant du contexte ou des indications pour le champ. Ce texte est affiché avec le champ et son libellé afin de fournir davantage d'informations ou d'instructions à l'utilisateur. Il est également exposé aux utilisateurs de lecteurs d'écran.
disabled	boolean	Désactive le contrôle, empêchant toute interaction.
error	any	Signale une erreur à l'utilisateur. Le champ reçoit un traitement visuel spécifique pour signaler des problèmes à résoudre immédiatement.
label	any	Contenu visuel à utiliser comme libellé du contrôle.
labelAccessibilityVisibility	"visible" | "exclusive"	Modifie la visibilité du libellé du composant. - visible : le libellé est visible par tous les utilisateurs. - exclusive : le libellé est masqué visuellement mais reste dans l'arbre d'accessibilité.
name	string	Un identifiant du contrôle, unique au sein du composant Form parent le plus proche.
required	boolean	Indique si le champ exige une valeur. Cette exigence ajoute une valeur sémantique au champ, mais n'affiche pas automatiquement d'erreur. Pour afficher une erreur lorsque ce champ est vide, utilisez la propriété error.
value	string	La valeur utilisée dans les données du formulaire lorsque le contrôle est coché.

Events

Event	Type
blur	FocusEvent
change	Event
input	Event

Écoutez-les avec des listeners de la forme @blur sur <SSwitch>.