SChoiceList <s-choice-list>

Eine Gruppe von Radiobuttons oder Checkboxen zur Auswahl einer oder mehrerer Optionen. SChoiceList ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-choice-list>.

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

Best Practices

• Auswahlmodus an die Optionen anpassen. Behalten Sie die Einfachauswahl für Optionen bei, die sich gegenseitig ausschließen, etwa Zahlungsarten oder Versandgeschwindigkeiten, und setzen Sie multiple, wenn Händler mehrere wählen können.
• Auswahl-Labels beschreiben das Ergebnis. „Email notifications for new orders“ sagt mehr als „Email“. Halten Sie Labels kurz, aber klar genug, um für sich allein zu stehen.
• label als Frage oder Aussage formulieren. Ein Titel wie „Which shipping method?“ oder „Select notification preferences“ sagt Händlern mehr als ein vages Wort wie „Options“ oder „Settings“.
• Komplexe Optionen im Slot details erklären. Ergänzen Sie Details an einem einzelnen SChoice, wenn Händler verstehen müssen, was die Auswahl bedeutet.
• error-Meldungen konkret formulieren. Sagen Sie Händlern genau, was fehlt, zum Beispiel „Select at least one notification preference“, statt eines allgemeinen „Required field“.

<SChoiceList label="Which shipping method?">
  <SChoice value="standard">Standard shipping</SChoice>
  <SChoice value="express">
    Express shipping
    <template #details>
      <SText>Costs more, but orders arrive in 1–2 business days.</SText>
    </template>
  </SChoice>
</SChoiceList>

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

Beispiel

EmailSMSPush notification

Selected: (none)

<script setup>
import { ref } from 'vue'
import { SChoiceList, SChoice } from 'polaris-vue-elements'

const value = ref([])
</script>

<template>
  <SChoiceList label="Notify me by" multiple v-model="value">
    <SChoice value="email">Email</SChoice>
    <SChoice value="sms">SMS</SChoice>
    <SChoice value="push">Push notification</SChoice>
  </SChoiceList>
  <p>Selected: {{ value.join(', ') }}</p>
</template>

v-model

v-model auf <SChoiceList> bindet die Property values und lauscht auf das DOM-Event change.

<SChoiceList v-model="value" />

entspricht:

<SChoiceList :values="value" @change="value = $event.target.values" />

Props

Prop	Typ	Beschreibung
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	Ob das Feld deaktiviert ist, sodass keine Benutzerinteraktion möglich ist. Bei true wird die Eigenschaft disabled aller untergeordneten Optionen ignoriert.
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	Inhalt, der als Label des Felds 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.
multiple	boolean	Ob mehrere Optionen ausgewählt werden können.
name	string	Eine Kennung für das Feld, die innerhalb des nächsten umschließenden Formulars eindeutig ist.
values	string[]	Ein Array der values der ausgewählten Optionen. Eine Komfort-Prop, um die Prop selected an untergeordneten Optionen zu setzen.

Events

Event	Typ
change	Event
input	Event

Auf diese Events lauschen Sie mit Listenern im Stil von @change auf <SChoiceList>.

Slots

Slot	Beschreibung
default	Die Auswahlmöglichkeiten für den Nutzer. Akzeptiert Choice-Komponenten.