SNumber <s-number>

Hiển thị một số bạn đã định dạng sẵn, với kiểu chữ, tone và màu sắc. SNumber là Vue 3 wrapper có type cho web component <s-number> của Shopify Polaris.

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

Best practices

• Chỉ bọc con số. Đặt riêng giá trị số trong SNumber và để phần chữ xung quanh trong SText hoặc SParagraph. Chữ số dạng bảng (tabular) giúp các con số thẳng hàng gọn gàng nhưng khiến chữ thường trông không đều.
• Định dạng giá trị trong app trước. SNumber điều khiển cách chữ số hiển thị chứ không định dạng giá trị, nên bạn tự thêm ký hiệu tiền tệ, phần thập phân và dấu phân cách hàng nghìn sao cho khớp với locale của người bán.
• Chỉ dùng tone khi con số mang trạng thái. Đặt tone khi bản thân con số báo hiệu điều gì đó, chẳng hạn hàng tồn kho đã hết. Đặt tone cho mọi con số thì sẽ chẳng con số nào nổi bật.
• Định cỡ con số theo mức độ quan trọng. Cho con số mà người bán nên đọc trước, như tổng tiền, một fontSize lớn hơn, và để các con số phụ ở cỡ mặc định.

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

Xem best practices của Shopify cho <s-number> (tiếng Anh) để có hướng dẫn đầy đủ.

Ví dụ

$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	Kiểu	Mô tả
accessibilityVisibility	"visible" | "hidden" | "exclusive"	Thay đổi khả năng hiển thị của phần tử. - visible: phần tử hiển thị với mọi người dùng. - hidden: phần tử bị loại khỏi cây trợ năng nhưng vẫn hiển thị. - exclusive: phần tử bị ẩn về mặt thị giác nhưng vẫn nằm trong cây trợ năng.
color	"subdued" | "base"	Mức nhấn mạnh màu áp dụng cho số. - base: Mức nhấn mạnh tiêu chuẩn cho nội dung số. - subdued: Màu giảm nhấn mạnh cho nội dung số phụ hoặc bổ trợ.
dir	"auto" | "ltr" | "rtl"	Chỉ định hướng của văn bản trong phần tử. - ltr: ngôn ngữ viết từ trái sang phải (ví dụ: tiếng Anh) - rtl: ngôn ngữ viết từ phải sang trái (ví dụ: tiếng Ả Rập) - auto: user agent xác định hướng dựa trên nội dung - '': hướng được kế thừa từ các phần tử cha (tương đương với việc không đặt thuộc tính)
fontSize	"base" | "auto" | "small-200" | "small-100" | "small" | "large" | "large-100"	Cỡ chữ của số. Các giá trị có tên cũng áp dụng line-height và letter-spacing tương ứng.
fontWeight	"base" | "auto" | "medium" | "semibold" | "bold"	Độ đậm phông chữ của số.
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	Tone ngữ nghĩa áp dụng cho con số, làm thay đổi màu sắc để truyền tải ý nghĩa. - info: Nội dung mang tính thông tin hoặc mẹo hữu ích (xanh dương). - success: Kết quả tích cực hoặc trạng thái thành công (xanh lá). - warning: Cảnh báo quan trọng về vấn đề tiềm ẩn (cam). - critical: Vấn đề khẩn cấp hoặc hành động phá hủy (đỏ). - auto: Tự động xác định dựa trên ngữ cảnh. - neutral: Thông tin chung không có mục đích cụ thể (xám). - caution: Thông báo khuyến nghị cần chú ý (vàng).

Slots

Slot	Mô tả
default	Con số cần hiển thị. Component tạo kiểu cho giá trị bạn truyền vào — kiểu chữ, tone và màu sắc — và render nó đúng như được cung cấp, vì vậy bạn cần tự định dạng và bản địa hóa nó.