SNumber <s-number>

이미 서식을 지정한 숫자를 타이포그래피, 톤, 색상 스타일과 함께 표시합니다. SNumber은(는) Shopify Polaris <s-number> web component를 위한 타입이 지정된 Vue 3 wrapper입니다.

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

모범 사례

• 숫자만 감싸세요. 숫자 값 자체만 SNumber에 넣고, 주변 단어는 SText나 SParagraph에 둡니다. 고정폭 숫자(tabular digits)는 수치를 깔끔하게 정렬하지만 일반 단어는 고르지 않게 보이게 만듭니다.
• 값은 앱에서 먼저 서식을 지정하세요. SNumber는 값의 서식이 아니라 숫자의 모양을 제어하므로, 판매자의 로캘에 맞게 통화 기호, 소수점, 천 단위 구분 기호를 직접 추가합니다.
• 수치에 상태가 있을 때만 tone을 사용하세요. 품절된 재고처럼 숫자 자체가 무언가를 알릴 때 tone을 설정합니다. 모든 수치에 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"	숫자의 글꼴 크기입니다. 이름이 있는 값은 그에 맞는 줄 높이와 자간도 함께 적용합니다.
fontWeight	"base" | "auto" | "medium" | "semibold" | "bold"	숫자의 글꼴 두께입니다.
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	숫자에 적용되는 시맨틱 톤으로, 색상을 바꿔 의미를 전달합니다. - info: 정보성 콘텐츠 또는 유용한 팁(파란색). - success: 긍정적인 결과 또는 성공 상태(초록색). - warning: 잠재적 문제에 대한 중요한 경고(주황색). - critical: 긴급한 문제 또는 파괴적인 액션(빨간색). - auto: 컨텍스트에 따라 자동으로 결정됩니다. - neutral: 특정 의도가 없는 일반 정보(회색). - caution: 주의가 필요한 권고 알림(노란색).

Slots

Slot	설명
default	표시할 숫자입니다. 컴포넌트는 전달된 값에 타이포그래피, 톤, 색상 스타일을 적용하고 주어진 그대로 렌더링하므로, 포맷과 현지화는 직접 처리하세요.