SNumber <s-number>

आपके द्वारा पहले से format किया गया number दिखाता है, typography, tone और color styling के साथ। SNumber Shopify के Polaris <s-number> web component का typed Vue 3 wrapper है।

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

Best practices

• केवल अंक को wrap करें। संख्यात्मक value को ही SNumber में रखें और उसके आसपास के शब्दों को SText या SParagraph में छोड़ दें। Tabular digits अंकों को साफ़-सुथरे ढंग से align करते हैं, लेकिन सामान्य शब्दों को असमान दिखाते हैं।
• Values को पहले अपने app में format करें। SNumber यह नियंत्रित करता है कि अंक कैसे दिखें, न कि value कैसे format हो, इसलिए merchant के locale से मेल खाने के लिए currency चिह्न, दशमलव और हज़ारों के separators स्वयं जोड़ें।
• Tone का उपयोग तभी करें जब अंक की कोई स्थिति हो। tone तब सेट करें जब संख्या स्वयं कुछ संकेत देती हो, जैसे ख़त्म हो चुका stock। हर अंक पर tone लगाने से कोई भी अलग से नहीं दिखता।
• अंकों का आकार उनके महत्व के अनुसार रखें। जिस संख्या को merchants को सबसे पहले पढ़ना चाहिए, जैसे कुल योग, उसे बड़ा fontSize दें, और द्वितीयक अंकों को default आकार में रहने दें।

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

सभी सुझावों के लिए <s-number> के लिए Shopify की best practices (अंग्रेज़ी में) देखें।

उदाहरण

$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	Type	विवरण
accessibilityVisibility	"visible" | "hidden" | "exclusive"	element की visibility बदलता है। - visible: element सभी users को दिखाई देता है। - hidden: element accessibility tree से हटा दिया जाता है लेकिन दिखाई देता रहता है। - exclusive: element दृश्य रूप से छिपा रहता है लेकिन accessibility tree में बना रहता है।
color	"subdued" | "base"	संख्या पर लागू color emphasis। - base: numeric content के लिए सामान्य ज़ोर। - subdued: secondary या सहायक numeric content के लिए कम ज़ोर वाला color।
dir	"auto" | "ltr" | "rtl"	element के text की directionality बताता है। - ltr: बाएँ से दाएँ लिखी जाने वाली भाषाएँ (जैसे English) - rtl: दाएँ से बाएँ लिखी जाने वाली भाषाएँ (जैसे Arabic) - auto: user agent content के आधार पर direction तय करता है - '': direction parent elements से inherit होती है (attribute सेट न करने के बराबर)
fontSize	"base" | "auto" | "small-200" | "small-100" | "small" | "large" | "large-100"	संख्या का font size। नामित values अपने अनुरूप line-height और letter-spacing भी लागू करती हैं।
fontWeight	"base" | "auto" | "medium" | "semibold" | "bold"	संख्या का font weight।
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	संख्या पर लागू semantic tone, जो अर्थ बताने के लिए उसका color बदलता है। - info: जानकारी देने वाली सामग्री या उपयोगी सुझाव (नीला)। - success: सकारात्मक परिणाम या सफल states (हरा)। - warning: संभावित समस्याओं के बारे में महत्वपूर्ण चेतावनियाँ (नारंगी)। - critical: तत्काल समस्याएँ या destructive actions (लाल)। - auto: context के आधार पर अपने आप तय होता है। - neutral: बिना किसी विशेष उद्देश्य की सामान्य जानकारी (स्लेटी)। - caution: सलाह देने वाली सूचनाएँ जिन पर ध्यान देना ज़रूरी है (पीला)।

Slots

Slot	विवरण
default	दिखाई जाने वाली संख्या। component आपके द्वारा दिए गए मान को style करता है — typography, tone और color — और उसे वैसे ही render करता है, इसलिए उसे format और localize आप स्वयं करें।