SNumberField <s-number-field>

वैकल्पिक minimum, maximum और step वाला एक numeric input। SNumberField Shopify के Polaris <s-number-field> web component का typed Vue 3 wrapper है।

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

Best practices

• इसे केवल संख्यात्मक values तक सीमित रखें। मात्रा, माप या प्रतिशत जैसी चीज़ों के लिए इसका उपयोग करें। अगर किसी value में अक्षर या चिह्न हो सकते हैं, जैसे product code या फ़ोन नंबर, तो इसके बजाय STextField का उपयोग करें।
• इकाई दिखाएँ। संख्या क्या मापती है यह बताने के लिए prefix या suffix का उपयोग करें, ताकि merchants को यह अनुमान न लगाना पड़े कि वे डॉलर, किलोग्राम या प्रतिशत टाइप कर रहे हैं।
• अपने business rules से मेल खाती सीमाएँ तय करें। ऐसे min और max values दें जो दर्शाएँ कि वास्तव में क्या अनुमत है, ताकि form सबमिट करने से पहले ही merchants सही entries की ओर बढ़ें।
• Errors की जाँच करें और उन्हें समझाएँ। हर संख्यात्मक entry की जाँच करें, और जब कोई विफल हो, तो सामान्य संदेश दिखाने के बजाय error से ठीक-ठीक बताएँ कि क्या गलत है और उसे कैसे ठीक करें।

<SNumberField label="Discount" suffix="%" :min="0" :max="100" />

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

उदाहरण

Value: 1

<script setup>
import { ref } from 'vue'
import { SNumberField } from 'polaris-vue-elements'

const value = ref('1')
</script>

<template>
  <SNumberField label="Quantity" :min="0" :max="100" :step="1" v-model="value" />
  <p>Value: {{ value }}</p>
</template>

v-model

<SNumberField> पर v-model value property से bind होता है और input DOM event को सुनता है।

<SNumberField v-model="value" />

इसके बराबर है:

<SNumberField :value="value" @input="value = $event.target.value" />

Props

Prop	Type	विवरण
autocomplete	"one-time-code" | "cc-number" | "cc-csc" | "on" | "off" | "shipping one-time-code" | "billing one-time-code" | "shipping cc-number" … (3 more)	field में अपेक्षित content का संकेत। जब इसे on (default) पर सेट किया जाता है, तो यह property बताती है कि field को autofill सपोर्ट करना चाहिए, लेकिन अपेक्षित content के बारे में आपके पास कोई और semantic जानकारी नहीं है। off पर सेट करके आप बताते हैं कि इस field में संवेदनशील जानकारी है, या ऐसा content है जो कभी save नहीं होता, जैसे one-time codes। इसके बजाय, आप ऐसी value भी दे सकते हैं जो बताए कि autofill के दौरान इस field में कौन-सा विशेष डेटा भरा जाना चाहिए।
defaultValue	string	field का डिफ़ॉल्ट मान।
details	any	field के लिए संदर्भ या मार्गदर्शन देने वाला अतिरिक्त text। user को अधिक जानकारी या निर्देश देने के लिए यह text field और उसके label के साथ दिखाया जाता है। यह screen reader users को भी उपलब्ध कराया जाएगा।
disabled	boolean	field को disable करता है, जिससे कोई भी interaction संभव नहीं रहता।
error	any	user को error बताएँ। field को एक विशेष style दिया जाएगा, ताकि ऐसी समस्याएँ बताई जा सकें जिन्हें तुरंत हल करना ज़रूरी है।
id	string	element के लिए एक unique identifier।
inputMode	"decimal" | "numeric"	mobile devices पर दिखाए जाने वाले virtual keyboard का type। - decimal: decimal point वाला numeric keyboard दिखाता है, जो कीमतों या मापों के लिए उपयुक्त है। - numeric: बिना decimal point वाला numeric keyboard दिखाता है, जो मात्रा जैसी पूर्ण संख्याओं के लिए उपयुक्त है। inputmode attribute के बारे में और जानें।
label	any	field label के रूप में उपयोग होने वाला content।
labelAccessibilityVisibility	"visible" | "exclusive"	component के label की visibility बदलता है। - visible: label सभी users को दिखाई देता है। - exclusive: label दृश्य रूप से छिपा रहता है लेकिन accessibility tree में बना रहता है।
max	number	field के लिए स्वीकार किया जाने वाला सबसे बड़ा decimal या integer। step के साथ उपयोग करने पर मान max संख्या तक round down होगा। ध्यान दें: उपयोगकर्ता फिर भी keyboard से max से बड़ी संख्या दर्ज कर सकेगा। उपयुक्त validation जोड़ना developer की ज़िम्मेदारी है।
min	number	field के लिए स्वीकार किया जाने वाला सबसे छोटा decimal या integer। step के साथ उपयोग करने पर मान min संख्या तक round up होगा। ध्यान दें: उपयोगकर्ता फिर भी keyboard से min से छोटी संख्या दर्ज कर सकेगा। उपयुक्त validation जोड़ना developer की ज़िम्मेदारी है।
name	string	field के लिए identifier, जो सबसे नज़दीकी containing form के भीतर unique हो।
placeholder	string	एक छोटा संकेत जो field की अपेक्षित value बताता है।
prefix	string	field के editable हिस्से के ठीक पहले दिखाई जाने वाली value। यह value के किसी निहित हिस्से को दिखाने के लिए उपयोगी है, जैसे "https://" या "+353"। user इसे edit नहीं कर सकता, और यह field की value में शामिल नहीं होती। हो सकता है कि यह तब तक न दिखे जब तक user ने input के साथ interact न किया हो। उदाहरण के लिए, user के input पर focus करने तक prefix की जगह कोई inline label दिख सकता है।
readOnly	boolean	उपयोगकर्ता field को edit नहीं कर सकता। यह focus हो सकता है और screen readers द्वारा announce किया जाएगा।
required	boolean	क्या field के लिए कोई मान ज़रूरी है। यह आवश्यकता field में semantic अर्थ जोड़ती है, लेकिन इससे अपने आप कोई error नहीं दिखेगा। यदि आप चाहते हैं कि यह field खाली होने पर error दिखे, तो आप error property के साथ ऐसा कर सकते हैं।
step	number	value जितनी बढ़ या घट सकती है, वह मात्रा। यह integer या decimal हो सकती है। अगर buttons से value बढ़ाते/घटाते समय step के साथ max या min दिया गया है, तो अंतिम value हमेशा निकटतम मान्य मात्रा के बजाय max या min पर round होगी।
suffix	string	field के editable हिस्से के ठीक बाद दिखाई जाने वाली value। यह value के किसी निहित हिस्से को दिखाने के लिए उपयोगी है, जैसे "@shopify.com" या "%"। user इसे edit नहीं कर सकता, और यह field की value में शामिल नहीं होती। हो सकता है कि यह तब तक न दिखे जब तक user ने input के साथ interact न किया हो। उदाहरण के लिए, user के input पर focus करने तक suffix की जगह कोई inline label दिख सकता है।
value	string

पढ़ने में आसानी के लिए ऊपर के कुछ type columns छोटे किए गए हैं; पूरा union library के generate किए गए TypeScript types (src/lib/generated/types.ts) में उपलब्ध है।

Events

Event	Type
blur	FocusEvent
change	Event
focus	FocusEvent
input	Event

इन्हें <SNumberField> पर @blur जैसे listeners से सुनें।

Slots

Slot	विवरण
details
error