SNumberField <s-number-field>

Ein numerisches Eingabefeld mit optionalem Minimum, Maximum und Schrittweite. SNumberField ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-number-field>.

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

Best Practices

• Nur für rein numerische Werte verwenden. Es eignet sich für Mengen, Maße oder Prozentwerte. Kann ein Wert Buchstaben oder Symbole enthalten, etwa ein Produktcode oder eine Telefonnummer, verwenden Sie stattdessen STextField.
• Die Einheit anzeigen. Verwenden Sie prefix oder suffix, um zu zeigen, was die Zahl misst, damit Händler nicht rätseln, ob sie Dollar, Kilogramm oder einen Prozentwert eingeben.
• Grenzen passend zu Ihren Geschäftsregeln setzen. Geben Sie min und max Werte, die widerspiegeln, was tatsächlich erlaubt ist. So werden Händler schon vor dem Absenden zu gültigen Eingaben geführt.
• Validieren und Fehler erklären. Prüfen Sie jede numerische Eingabe und sagen Sie bei einem Fehler mit error genau, was falsch ist und wie es sich beheben lässt, statt eine allgemeine Meldung anzuzeigen.

<SNumberField label="Discount" suffix="%" :min="0" :max="100" />

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

Beispiel

Value: 1

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

const value = ref('1')
</script>

<template>
  <SNumberField label="Quantity" :min="0" :max="100" :step="1" v-model="value" />
  <p>Value: {{ value }}</p>
</template>

v-model

v-model auf <SNumberField> bindet die Property value und lauscht auf das DOM-Event input.

<SNumberField v-model="value" />

entspricht:

<SNumberField :value="value" @input="value = $event.target.value" />

Props

Prop	Typ	Beschreibung
autocomplete	"one-time-code" | "cc-number" | "cc-csc" | "on" | "off" | "shipping one-time-code" | "billing one-time-code" | "shipping cc-number" … (3 more)	Ein Hinweis auf den vorgesehenen Inhalt des Felds. Bei on (Standard) gibt diese Eigenschaft an, dass das Feld Autofill unterstützen soll, ohne dass weitere semantische Informationen zum vorgesehenen Inhalt vorliegen. Mit off wird angegeben, dass das Feld sensible Informationen oder Inhalte enthält, die nie gespeichert werden, etwa Einmalcodes. Alternativ kann ein Wert angegeben werden, der die konkreten Daten beschreibt, die beim Autofill in dieses Feld eingetragen werden sollen.
defaultValue	string	Der Standardwert des Feldes.
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 Feld 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.
id	string	Eine eindeutige Kennung für das Element.
inputMode	"decimal" | "numeric"	Die Art der virtuellen Tastatur auf Mobilgeräten. - decimal: Zeigt eine numerische Tastatur mit Dezimaltrennzeichen, geeignet für Preise oder Maße. - numeric: Zeigt eine numerische Tastatur ohne Dezimaltrennzeichen, geeignet für ganze Zahlen wie Mengen. Weitere Informationen zum inputmode-Attribut.
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.
max	number	Die höchste Dezimal- oder Ganzzahl, die für das Feld akzeptiert wird. In Verbindung mit step wird der Wert auf die Maximalzahl abgerundet. Hinweis: Benutzer können über die Tastatur weiterhin eine Zahl größer als das Maximum eingeben. Eine geeignete Validierung muss die Entwicklerin bzw. der Entwickler selbst ergänzen.
min	number	Die niedrigste Dezimal- oder Ganzzahl, die für das Feld akzeptiert wird. In Verbindung mit step wird der Wert auf die Minimalzahl aufgerundet. Hinweis: Benutzer können über die Tastatur weiterhin eine Zahl kleiner als das Minimum eingeben. Eine geeignete Validierung muss die Entwicklerin bzw. der Entwickler selbst ergänzen.
name	string	Eine Kennung für das Feld, die innerhalb des nächsten umschließenden Formulars eindeutig ist.
placeholder	string	Ein kurzer Hinweis, der den erwarteten Wert des Felds beschreibt.
prefix	string	Ein Wert, der direkt vor dem bearbeitbaren Teil des Felds angezeigt wird. Nützlich, um einen implizierten Teil des Werts anzuzeigen, etwa "https://" oder "+353". Er kann vom Nutzer nicht bearbeitet werden und ist nicht im Wert des Felds enthalten. Er wird möglicherweise erst angezeigt, nachdem der Nutzer mit dem Input interagiert hat. Beispielsweise kann ein Inline-Label den Platz des Präfix einnehmen, bis der Nutzer den Input fokussiert.
readOnly	boolean	Das Feld kann vom Benutzer nicht bearbeitet werden. Es ist fokussierbar und wird von Screenreadern angesagt.
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.
step	number	Der Betrag, um den der Wert erhöht oder verringert werden kann. Kann eine Ganzzahl oder Dezimalzahl sein. Sind max oder min zusammen mit step angegeben, wird der Endwert beim Erhöhen/Verringern über die Buttons immer auf max bzw. min gerundet statt auf den nächstgelegenen gültigen Betrag.
suffix	string	Ein Wert, der direkt nach dem bearbeitbaren Teil des Felds angezeigt wird. Nützlich, um einen implizierten Teil des Werts anzuzeigen, etwa "@shopify.com" oder "%". Er kann vom Nutzer nicht bearbeitet werden und ist nicht im Wert des Felds enthalten. Er wird möglicherweise erst angezeigt, nachdem der Nutzer mit dem Input interagiert hat. Beispielsweise kann ein Inline-Label den Platz des Suffix einnehmen, bis der Nutzer den Input fokussiert.
value	string

Einige Typspalten oben wurden zur besseren Lesbarkeit gekürzt; die vollständigen Unions finden sich in den generierten TypeScript-Typen der Bibliothek (src/lib/generated/types.ts).

Events

Event	Typ
blur	FocusEvent
change	Event
focus	FocusEvent
input	Event

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

Slots

Slot	Beschreibung
details
error