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>

詳しいガイダンスについては、<s-number> に関する Shopify のベストプラクティス（英語）を参照してください。

例

$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"	数値のフォントサイズです。名前付きの値は、対応する line-height と letter-spacing も適用します。
fontWeight	"base" | "auto" | "medium" | "semibold" | "bold"	数値のフォントウェイトです。
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	数値に適用されるセマンティックなトーンで、色を変えて意味を伝えます。 - info: 情報提供のコンテンツや役立つヒント（青）。 - success: 良い結果や成功した状態（緑）。 - warning: 潜在的な問題に関する重要な警告（オレンジ）。 - critical: 緊急の問題や破壊的なアクション（赤）。 - auto: コンテキストに基づいて自動的に決定されます。 - neutral: 特定の意図を持たない一般的な情報（グレー）。 - caution: 注意が必要な勧告的な通知（黄）。

Slots

Slot	説明
default	表示する数値です。コンポーネントは渡された値にスタイル（タイポグラフィ、トーン、色）を適用し、そのままの形でレンダリングするため、フォーマットやローカライズはご自身で行ってください。