SSwitch <s-switch>

Un interruptor que activa o desactiva un ajuste. SSwitch es el wrapper de Vue 3 tipado del web component <s-switch> de Shopify Polaris.

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

Buenas prácticas

• No combines los interruptores con un botón de guardar. Un interruptor surte efecto en el momento en que se activa o desactiva, así que añadir un botón de guardar deja a los comerciantes sin saber cuándo se aplica realmente su cambio.
• Haz que el ajuste sea evidente. Escribe un label que indique a los comerciantes qué controla el interruptor y qué significan activado y desactivado, para que no tengan que accionarlo solo para averiguarlo.
• Describe las consecuencias. Usa details para explicar qué cambia al accionar el interruptor, sobre todo en ajustes que afectan a funciones o datos importantes, para que los comerciantes decidan con confianza.
• Agrupa y ordena los interruptores relacionados. Cuando una página tiene varios interruptores, mantén juntos los ajustes relacionados en un orden lógico para que los comerciantes puedan encontrarlos y configurarlos fácilmente.
• Explica por qué un interruptor no está disponible. Cuando un interruptor está disabled por permisos, dependencias o límites del plan, indica a los comerciantes el motivo, si es temporal y qué deben hacer para desbloquearlo.

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

Consulta las buenas prácticas de Shopify para <s-switch> (en inglés) para ver todas las recomendaciones.

Ejemplo

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 en <SSwitch> se vincula a la propiedad checked y escucha el event DOM change.

<SSwitch v-model="value" />

equivale a:

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

Props

Prop	Tipo	Descripción
accessibilityLabel	string	Una etiqueta destinada a los usuarios de tecnologías de asistencia, como los lectores de pantalla. Cuando se define, no se anuncian los elementos secundarios ni la label proporcionada. También puede usarse para mostrar un control sin etiqueta visible y seguir aportando contexto a los usuarios de lectores de pantalla.
checked	boolean	Si el control está activo.
defaultChecked	boolean	Si el control está activo de forma predeterminada.
details	any	Texto adicional que aporta contexto u orientación sobre el campo. Este texto se muestra junto con el campo y su etiqueta para ofrecer más información o instrucciones al usuario. También se expone a los usuarios de lectores de pantalla.
disabled	boolean	Desactiva el control e impide cualquier interacción.
error	any	Indica un error al usuario. El campo recibe un tratamiento estilístico específico para comunicar problemas que deben resolverse de inmediato.
label	any	Contenido visual que se usa como etiqueta del control.
labelAccessibilityVisibility	"visible" | "exclusive"	Cambia la visibilidad de la etiqueta del componente. - visible: la etiqueta es visible para todos los usuarios. - exclusive: la etiqueta se oculta visualmente, pero permanece en el árbol de accesibilidad.
name	string	Un identificador del control que es único dentro del componente Form contenedor más cercano.
required	boolean	Si el campo requiere un valor. Este requisito añade valor semántico al campo, pero no hará que aparezca un error automáticamente. Si quieres mostrar un error cuando este campo esté vacío, puedes hacerlo con la propiedad error.
value	string	El valor que se usa en los datos del formulario cuando el control está marcado.

Events

Event	Tipo
blur	FocusEvent
change	Event
input	Event

Escúchalos con listeners del estilo @blur en <SSwitch>.