SSwitch <s-switch>

Ein Umschalter, der eine Einstellung ein- oder ausschaltet. SSwitch ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-switch>.

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

Best Practices

• Switches nicht mit einem Speichern-Button kombinieren. Ein Switch wirkt sofort beim Umschalten. Ein zusätzlicher Speichern-Button lässt Händler im Unklaren, wann ihre Änderung tatsächlich greift.
• Die Einstellung offensichtlich machen. Schreiben Sie ein label, das Händlern sagt, was der Switch steuert und was Ein und Aus bedeuten, damit sie ihn nicht erst umlegen müssen, um es herauszufinden.
• Die Folgen beschreiben. Erklären Sie mit details, was sich beim Umschalten ändert, besonders bei Einstellungen, die wichtige Funktionen oder Daten betreffen, damit Händler sicher entscheiden können.
• Zusammengehörige Switches gruppieren und ordnen. Hat eine Seite mehrere Switches, halten Sie zusammengehörige Einstellungen in logischer Reihenfolge beieinander, damit Händler sie leicht finden und konfigurieren können.
• Erklären, warum ein Switch nicht verfügbar ist. Ist ein Switch wegen Berechtigungen, Abhängigkeiten oder Tarifgrenzen disabled, sagen Sie Händlern, warum, ob es vorübergehend ist und was sie tun müssen, um ihn freizuschalten.

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

Die vollständigen Richtlinien finden sich in Shopifys Best Practices für <s-switch> (auf Englisch).

Beispiel

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 auf <SSwitch> bindet die Property checked und lauscht auf das DOM-Event change.

<SSwitch v-model="value" />

entspricht:

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

Props

Prop	Typ	Beschreibung
accessibilityLabel	string	Ein Label für Nutzer assistiver Technologien wie Screenreader. Wenn gesetzt, werden Kindelemente oder ein angegebenes label nicht vorgelesen. Damit lässt sich auch ein Control ohne sichtbares Label anzeigen, das Screenreader-Nutzern dennoch Kontext bietet.
checked	boolean	Ob das Steuerelement aktiv ist.
defaultChecked	boolean	Ob das Steuerelement standardmäßig aktiv ist.
details	any	Zusätzlicher Text, der Kontext oder Hilfestellung zum Feld bietet. Dieser Text wird zusammen mit dem Feld und seinem Label angezeigt, um dem Nutzer weitere Informationen oder Anweisungen zu geben. Er wird auch Screenreader-Nutzern zugänglich gemacht.
disabled	boolean	Deaktiviert das Control und verhindert jegliche Interaktion.
error	any	Zeigt dem Nutzer einen Fehler an. Das Feld erhält eine besondere Gestaltung, um Probleme zu kennzeichnen, die sofort behoben werden müssen.
label	any	Visueller Inhalt, der als Beschriftung des Steuerelements verwendet wird.
labelAccessibilityVisibility	"visible" | "exclusive"	Ändert die Sichtbarkeit des Labels der Komponente. - visible: Das Label ist für alle Nutzer sichtbar. - exclusive: Das Label ist visuell ausgeblendet, bleibt aber im Accessibility Tree.
name	string	Eine Kennung für das Control, die innerhalb der nächsten umschließenden Form-Komponente eindeutig ist.
required	boolean	Ob das Feld einen Wert benötigt. Diese Anforderung verleiht dem Feld semantische Bedeutung, führt aber nicht automatisch zur Anzeige eines Fehlers. Wenn ein Fehler angezeigt werden soll, sobald dieses Feld leer ist, verwenden Sie dafür die Eigenschaft error.
value	string	Der in den Formulardaten verwendete Wert, wenn das Steuerelement aktiviert ist.

Events

Event	Typ
blur	FocusEvent
change	Event
input	Event

Auf diese Events lauschen Sie mit Listenern im Stil von @blur auf <SSwitch>.