SNumber <s-number>

Affiche un nombre déjà formaté, avec un style de typographie, de ton et de couleur. SNumber est le wrapper Vue 3 typé du web component <s-number> de Shopify Polaris.

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

Bonnes pratiques

• N'encapsulez que le chiffre. Placez la valeur numérique elle-même dans SNumber et laissez les mots qui l'entourent dans SText ou SParagraph. Les chiffres tabulaires alignent proprement les nombres, mais rendent les mots ordinaires irréguliers.
• Formatez d'abord les valeurs dans votre app. SNumber contrôle l'apparence des chiffres, pas le formatage de la valeur : ajoutez vous-même les symboles monétaires, les décimales et les séparateurs de milliers selon la locale du marchand.
• N'utilisez le ton que lorsque le chiffre a un statut. Définissez tone lorsque le nombre lui-même signale quelque chose, comme un stock épuisé. Si tous les chiffres ont un ton, aucun ne ressort.
• Dimensionnez les chiffres selon leur importance. Donnez une fontSize plus grande au nombre que les marchands doivent lire en premier, comme un total, et laissez les chiffres secondaires à la taille par défaut.

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

Consultez les bonnes pratiques de Shopify pour <s-number> (en anglais) pour l'ensemble des recommandations.

Exemple

$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	Type	Description
accessibilityVisibility	"visible" | "hidden" | "exclusive"	Modifie la visibilité de l'élément. - visible : l'élément est visible par tous les utilisateurs. - hidden : l'élément est retiré de l'arbre d'accessibilité mais reste visible. - exclusive : l'élément est masqué visuellement mais reste dans l'arbre d'accessibilité.
color	"subdued" | "base"	L'emphase de couleur appliquée au nombre. - base : emphase standard pour le contenu numérique. - subdued : couleur atténuée pour le contenu numérique secondaire ou d'appui.
dir	"auto" | "ltr" | "rtl"	Indique la directionnalité du texte de l'élément. - ltr : langues écrites de gauche à droite (p. ex. l'anglais) - rtl : langues écrites de droite à gauche (p. ex. l'arabe) - auto : l'agent utilisateur détermine la direction selon le contenu - '' : la direction est héritée des éléments parents (équivaut à ne pas définir l'attribut)
fontSize	"base" | "auto" | "small-200" | "small-100" | "small" | "large" | "large-100"	Taille de police du nombre. Les valeurs nommées appliquent aussi la hauteur de ligne et l'espacement des lettres correspondants.
fontWeight	"base" | "auto" | "medium" | "semibold" | "bold"	Graisse de police du nombre.
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	Le ton sémantique appliqué au nombre, qui modifie sa couleur pour transmettre un sens. - info : contenu informatif ou conseils utiles (bleu). - success : résultats positifs ou états de réussite (vert). - warning : avertissements importants sur des problèmes potentiels (orange). - critical : problèmes urgents ou actions destructrices (rouge). - auto : déterminé automatiquement selon le contexte. - neutral : information générale sans intention particulière (gris). - caution : avis nécessitant de l'attention (jaune).

Slots

Slot	Description
default	Le nombre à afficher. Le composant met en forme la valeur transmise — typographie, ton et couleur — et l'affiche telle quelle ; formatez-la et localisez-la donc vous-même.