SNumber <s-number>

显示已格式化的数字，并支持字体排版、色调和颜色样式。 SNumber 是 Shopify Polaris <s-number> web component 的带类型 Vue 3 wrapper。

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

最佳实践

• 只包裹数字本身。 将数值本身放在 SNumber 中，周围的文字则放在 SText 或 SParagraph 中。等宽数字能让数字整齐对齐，却会让普通文字显得参差不齐。
• 先在应用中格式化数值。 SNumber 控制数字的显示样式，而不负责数值的格式化，因此请自行添加货币符号、小数位和千位分隔符，以匹配商家的区域设置。
• 只在数字带有状态时使用色调。 当数字本身传达某种信号（例如库存已售罄）时才设置 tone。给每个数字都加上色调，反而会让任何数字都不再突出。
• 按重要性设置数字大小。 为商家应首先看到的数字（例如总计）设置较大的 fontSize，次要数字保持默认大小。

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

参阅 Shopify 关于 <s-number> 的最佳实践（英文）以获取完整指南。

示例

$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	类型	说明
accessibilityVisibility	"visible" | "hidden" | "exclusive"	更改元素的可见性。 - visible：元素对所有用户可见。 - hidden：元素从无障碍树中移除，但仍然可见。 - exclusive：元素在视觉上隐藏，但仍保留在无障碍树中。
color	"subdued" | "base"	应用于数字的颜色强调。 - base：数字内容的标准强调。 - subdued：用于次要或辅助数字内容的弱化颜色。
dir	"auto" | "ltr" | "rtl"	指明元素文本的方向。 - ltr：从左到右书写的语言（例如英语） - rtl：从右到左书写的语言（例如阿拉伯语） - auto：由用户代理根据内容确定方向 - ''：方向继承自父元素（等同于不设置该属性）
fontSize	"base" | "auto" | "small-200" | "small-100" | "small" | "large" | "large-100"	数字的字号。命名值还会应用与之匹配的行高和字间距。
fontWeight	"base" | "auto" | "medium" | "semibold" | "bold"	数字的字重。
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	应用于数字的语义色调，通过改变颜色来传达含义。 - info：说明性内容或实用提示（蓝色）。 - success：积极结果或成功状态（绿色）。 - warning：关于潜在问题的重要警告（橙色）。 - critical：紧急问题或破坏性操作（红色）。 - auto：根据上下文自动确定。 - neutral：无特定意图的一般信息（灰色）。 - caution：需要注意的提醒通知（黄色）。

Slots

Slot	说明
default	要显示的数字。组件会为传入的值设置样式（排版、语气和颜色），并按原样渲染，因此需要自行格式化和本地化。