SNumber <s-number>

Exibe um número que você já formatou, com estilos de tipografia, tom e cor. SNumber é o wrapper de Vue 3 tipado do web component <s-number> do Shopify Polaris.

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

Boas práticas

• Envolva apenas o número. Coloque o próprio valor numérico em SNumber e deixe as palavras ao redor em SText ou SParagraph. Os dígitos tabulares alinham os números de forma organizada, mas deixam palavras comuns com aparência irregular.
• Formate os valores primeiro no seu app. SNumber controla a aparência dos dígitos, não a formatação do valor, então adicione você mesmo os símbolos de moeda, as casas decimais e os separadores de milhar de acordo com a localidade do lojista.
• Use tone apenas quando o número tiver um status. Defina tone quando o próprio número sinalizar algo, como um estoque esgotado. Aplicar tom a todos os números faz com que nenhum deles se destaque.
• Dimensione os números por importância. Dê um fontSize maior ao número que os lojistas devem ler primeiro, como um total, e deixe os números secundários no tamanho padrão.

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

Veja as boas práticas da Shopify para <s-number> (em inglês) para todas as recomendações.

Exemplo

$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	Descrição
accessibilityVisibility	"visible" | "hidden" | "exclusive"	Altera a visibilidade do elemento. - visible: o elemento fica visível para todos os usuários. - hidden: o elemento é removido da árvore de acessibilidade, mas continua visível. - exclusive: o elemento fica visualmente oculto, mas permanece na árvore de acessibilidade.
color	"subdued" | "base"	A ênfase de cor aplicada ao número. - base: ênfase padrão para conteúdo numérico. - subdued: cor atenuada para conteúdo numérico secundário ou de apoio.
dir	"auto" | "ltr" | "rtl"	Indica a direcionalidade do texto do elemento. - ltr: idiomas escritos da esquerda para a direita (por exemplo, inglês) - rtl: idiomas escritos da direita para a esquerda (por exemplo, árabe) - auto: o agente do usuário determina a direção com base no conteúdo - '': a direção é herdada dos elementos pais (equivale a não definir o atributo)
fontSize	"base" | "auto" | "small-200" | "small-100" | "small" | "large" | "large-100"	Tamanho da fonte do número. Os valores nomeados também aplicam a altura de linha e o espaçamento entre letras correspondentes.
fontWeight	"base" | "auto" | "medium" | "semibold" | "bold"	Peso da fonte do número.
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	O tom semântico aplicado ao número, que altera sua cor para transmitir significado. - info: conteúdo informativo ou dicas úteis (azul). - success: resultados positivos ou estados de sucesso (verde). - warning: avisos importantes sobre possíveis problemas (laranja). - critical: problemas urgentes ou ações destrutivas (vermelho). - auto: determinado automaticamente com base no contexto. - neutral: informações gerais sem uma intenção específica (cinza). - caution: avisos de alerta que precisam de atenção (amarelo).

Slots

Slot	Descrição
default	O número a ser exibido. O componente estiliza o valor que você passa — tipografia, tom e cor — e o renderiza como recebido, então formate-o e localize-o você mesmo.