SNumber <s-number>

Muestra un número que ya has formateado, con estilos de tipografía, tono y color. SNumber es el wrapper de Vue 3 tipado del web component <s-number> de Shopify Polaris.

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

Buenas prácticas

• Envuelve solo la cifra. Coloca el valor numérico en SNumber y deja las palabras que lo rodean en SText o SParagraph. Los dígitos tabulares alinean las cifras con precisión, pero hacen que las palabras normales se vean irregulares.
• Da formato a los valores primero en tu app. SNumber controla el aspecto de los dígitos, no el formato del valor, así que añade tú mismo los símbolos de moneda, los decimales y los separadores de miles según la configuración regional del comerciante.
• Usa el tono solo cuando la cifra tenga un estado. Define tone cuando el propio número indique algo, como un stock agotado. Si todas las cifras tienen tono, ninguna destaca.
• Dimensiona las cifras según su importancia. Asigna un fontSize mayor al número que los comerciantes deben leer primero, como un total, y deja las cifras secundarias en el tamaño predeterminado.

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

Consulta las buenas prácticas de Shopify para <s-number> (en inglés) para ver todas las recomendaciones.

Ejemplo

$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	Tipo	Descripción
accessibilityVisibility	"visible" | "hidden" | "exclusive"	Cambia la visibilidad del elemento. - visible: el elemento es visible para todos los usuarios. - hidden: el elemento se elimina del árbol de accesibilidad, pero sigue siendo visible. - exclusive: el elemento se oculta visualmente, pero permanece en el árbol de accesibilidad.
color	"subdued" | "base"	El énfasis de color aplicado al número. - base: énfasis estándar para contenido numérico. - subdued: color atenuado para contenido numérico secundario o de apoyo.
dir	"auto" | "ltr" | "rtl"	Indica la direccionalidad del texto del elemento. - ltr: idiomas que se escriben de izquierda a derecha (p. ej., inglés) - rtl: idiomas que se escriben de derecha a izquierda (p. ej., árabe) - auto: el agente de usuario determina la dirección según el contenido - '': la dirección se hereda de los elementos padre (equivale a no establecer el atributo)
fontSize	"base" | "auto" | "small-200" | "small-100" | "small" | "large" | "large-100"	Tamaño de fuente del número. Los valores con nombre también aplican su altura de línea y su espaciado entre letras correspondientes.
fontWeight	"base" | "auto" | "medium" | "semibold" | "bold"	Grosor de fuente del número.
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	El tono semántico que se aplica al número y que cambia su color para transmitir significado. - info: contenido informativo o consejos útiles (azul). - success: resultados positivos o estados de éxito (verde). - warning: advertencias importantes sobre posibles problemas (naranja). - critical: problemas urgentes o acciones destructivas (rojo). - auto: se determina automáticamente según el contexto. - neutral: información general sin una intención específica (gris). - caution: avisos que requieren atención (amarillo).

Slots

Slot	Descripción
default	El número que se muestra. El componente aplica estilo al valor que pasas (tipografía, tono y color) y lo renderiza tal cual, así que dale formato y localízalo tú mismo.