SSwitch <s-switch>

Um interruptor que ativa ou desativa uma configuração. SSwitch é o wrapper de Vue 3 tipado do web component <s-switch> do Shopify Polaris.

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

Boas práticas

• Não combine switches com um botão de salvar. Um switch entra em vigor no momento em que é alternado, então adicionar um botão de salvar deixa os lojistas sem saber quando a alteração realmente é aplicada.
• Deixe a configuração óbvia. Escreva um label que diga aos lojistas o que o switch controla e o que significam ligado e desligado, para que eles não precisem alterná-lo só para descobrir.
• Descreva as consequências. Use details para explicar o que muda quando o switch é alternado, principalmente em configurações que afetam recursos ou dados importantes, para que os lojistas possam decidir com confiança.
• Agrupe e ordene switches relacionados. Quando uma página tiver vários switches, mantenha as configurações relacionadas juntas e em uma ordem lógica para que os lojistas consigam encontrá-las e configurá-las facilmente.
• Explique por que um switch está indisponível. Quando um switch estiver disabled por causa de permissões, dependências ou limites do plano, diga aos lojistas o motivo, se é temporário e o que eles precisam fazer para desbloqueá-lo.

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

Veja as boas práticas da Shopify para <s-switch> (em inglês) para todas as recomendações.

Exemplo

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 em <SSwitch> se vincula à propriedade checked e escuta o event DOM change.

<SSwitch v-model="value" />

equivale a:

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

Props

Prop	Tipo	Descrição
accessibilityLabel	string	Um rótulo destinado a usuários de tecnologias assistivas, como leitores de tela. Quando definido, os elementos filhos ou a label fornecida não são anunciados. Também pode ser usado para exibir um controle sem rótulo visível, ainda oferecendo contexto aos usuários de leitores de tela.
checked	boolean	Se o controle está ativo.
defaultChecked	boolean	Se o controle está ativo por padrão.
details	any	Texto adicional que oferece contexto ou orientação sobre o campo. Esse texto é exibido junto com o campo e seu rótulo para oferecer mais informações ou instruções ao usuário. Ele também é exposto aos usuários de leitores de tela.
disabled	boolean	Desativa o controle, impedindo qualquer interação.
error	any	Indica um erro ao usuário. O campo recebe um tratamento visual específico para comunicar problemas que precisam ser resolvidos imediatamente.
label	any	Conteúdo visual a ser usado como rótulo do controle.
labelAccessibilityVisibility	"visible" | "exclusive"	Altera a visibilidade do rótulo do componente. - visible: o rótulo fica visível para todos os usuários. - exclusive: o rótulo fica visualmente oculto, mas permanece na árvore de acessibilidade.
name	string	Um identificador do controle que é exclusivo dentro do componente Form contêiner mais próximo.
required	boolean	Se o campo exige um valor. Este requisito adiciona valor semântico ao campo, mas não faz um erro aparecer automaticamente. Se quiser exibir um erro quando este campo estiver vazio, você pode fazer isso com a propriedade error.
value	string	O valor usado nos dados do formulário quando o controle está marcado.

Events

Event	Tipo
blur	FocusEvent
change	Event
input	Event

Escute-os com listeners no estilo @blur em <SSwitch>.