SNumber <s-number>

Zeigt eine bereits formatierte Zahl an, mit Typografie-, Ton- und Farbgestaltung. SNumber ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-number>.

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

Best Practices

• Nur die Zahl umschließen. Setzen Sie den Zahlenwert selbst in SNumber und die umgebenden Wörter in SText oder SParagraph. Tabellarische Ziffern richten Zahlen sauber aus, lassen normale Wörter aber ungleichmäßig wirken.
• Werte zuerst in der App formatieren. SNumber steuert, wie Ziffern aussehen, nicht wie der Wert formatiert ist. Fügen Sie Währungssymbole, Dezimalstellen und Tausendertrennzeichen daher selbst passend zur Locale des Händlers hinzu.
• Tone nur verwenden, wenn die Zahl einen Status hat. Setzen Sie tone, wenn die Zahl selbst etwas signalisiert, etwa ausverkauften Bestand. Bekommt jede Zahl einen Tone, sticht keine mehr hervor.
• Zahlen nach Wichtigkeit dimensionieren. Geben Sie der Zahl, die Händler zuerst lesen sollen, etwa einer Gesamtsumme, eine größere fontSize und belassen Sie sekundäre Zahlen in der Standardgröße.

<SText>Total: </SText><SNumber fontSize="large">$1,240.50</SNumber>
<SText>In stock: </SText><SNumber tone="critical">0</SNumber>

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

Beispiel

$1,280.50$342.00-$58.25$0.00

ProductTotalSnowboard$1,280.50Ski boots$342.00Poles$58.25

<script setup>
import { SNumber, STable, STableHeaderRow, STableHeader, STableBody, STableRow, STableCell } from 'polaris-vue-elements'

const currency = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' })
const revenue = [
  { product: 'Snowboard', total: 1280.5 },
  { product: 'Ski boots', total: 342 },
  { product: 'Poles', total: 58.25 },
]
</script>

<template>
  <!-- SNumber's default slot renders the value as given — format and localize it yourself. -->
  <SNumber fontSize="large-100" fontWeight="bold">{{ currency.format(1280.5) }}</SNumber>
  <SNumber tone="success" fontWeight="semibold">{{ currency.format(342) }}</SNumber>
  <SNumber tone="critical" fontWeight="semibold">{{ currency.format(-58.25) }}</SNumber>
  <SNumber color="subdued" fontSize="small">{{ currency.format(0) }}</SNumber>

  <!-- tabular numerals line up nicely in a table column -->
  <STable variant="auto">
    <STableHeaderRow>
      <STableHeader listSlot="primary">Product</STableHeader>
      <STableHeader format="currency">Total</STableHeader>
    </STableHeaderRow>
    <STableBody>
      <STableRow v-for="row in revenue" :key="row.product">
        <STableCell>{{ row.product }}</STableCell>
        <STableCell><SNumber>{{ currency.format(row.total) }}</SNumber></STableCell>
      </STableRow>
    </STableBody>
  </STable>
</template>

Props

Prop	Typ	Beschreibung
accessibilityVisibility	"visible" | "hidden" | "exclusive"	Ändert die Sichtbarkeit des Elements. - visible: Das Element ist für alle Nutzer sichtbar. - hidden: Das Element wird aus dem Accessibility Tree entfernt, bleibt aber sichtbar. - exclusive: Das Element ist visuell ausgeblendet, bleibt aber im Accessibility Tree.
color	"subdued" | "base"	Die Farbbetonung der Zahl. - base: Standardbetonung für numerische Inhalte. - subdued: Zurückgenommene Farbe für sekundäre oder unterstützende numerische Inhalte.
dir	"auto" | "ltr" | "rtl"	Gibt die Schreibrichtung des Textes im Element an. - ltr: Sprachen, die von links nach rechts geschrieben werden (z. B. Englisch) - rtl: Sprachen, die von rechts nach links geschrieben werden (z. B. Arabisch) - auto: Der User Agent bestimmt die Richtung anhand des Inhalts - '': Die Richtung wird von übergeordneten Elementen geerbt (gleichbedeutend mit dem Weglassen des Attributs)
fontSize	"base" | "auto" | "small-200" | "small-100" | "small" | "large" | "large-100"	Schriftgröße der Zahl. Die benannten Werte wenden auch die passende Zeilenhöhe und Laufweite an.
fontWeight	"base" | "auto" | "medium" | "semibold" | "bold"	Schriftstärke der Zahl.
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	Der semantische Ton der Zahl, der ihre Farbe ändert, um Bedeutung zu vermitteln. - info: Informative Inhalte oder hilfreiche Tipps (blau). - success: Positive Ergebnisse oder erfolgreiche Zustände (grün). - warning: Wichtige Warnungen vor möglichen Problemen (orange). - critical: Dringende Probleme oder destruktive Aktionen (rot). - auto: Wird automatisch anhand des Kontexts bestimmt. - neutral: Allgemeine Informationen ohne bestimmte Absicht (grau). - caution: Hinweise, die Aufmerksamkeit erfordern (gelb).

Slots

Slot	Beschreibung
default	Die anzuzeigende Zahl. Die Komponente gestaltet den übergebenen Wert – Typografie, Ton und Farbe – und rendert ihn unverändert; formatieren und lokalisieren Sie ihn daher selbst.