SProgress <s-progress>

एक progress bar जो दिखाता है कि कोई task अपनी अधिकतम value की ओर कितना आगे बढ़ा है। SProgress Shopify के Polaris <s-progress> web component का typed Vue 3 wrapper है।

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

Best practices

• इसका उपयोग ऐसे काम के लिए करें जिसे मापा जा सके। Progress bar तब चुनें जब आप काम को किसी पूर्ण के हिस्से के रूप में व्यक्त कर सकें। जब आप यह न बता सकें कि किसी काम में कितना समय लगेगा या वह कितना आगे बढ़ चुका है, तो spinner हल्का विकल्प है।
• बताएँ कि क्या आगे बढ़ रहा है। accessibilityLabel को सटीक विवरण दें, उदाहरण के लिए "Importing products" या "Storage used"। Screen readers bar को उसी label के साथ पढ़ते हैं, और अगर आप इसे छोड़ दें तो कोई default नहीं होता।
• जब संख्याएँ मायने रखें तो text जोड़ें। Bar स्वयं कोई label या प्रतिशत नहीं दिखाता, इसलिए जब merchants को आँकड़ों की ज़रूरत हो तो उसके पास text रखें, और उस text को value के साथ मेल में रखें।
• max को वास्तविक कुल पर सेट करें। सब कुछ प्रतिशत में बदलने के बजाय वास्तविक गिनती या सीमा का उपयोग करें, जैसे कितनी files हैं या quota कितना बड़ा है। इससे काम पूरा होने पर value को अपडेट करना आसान हो जाता है।
• Tone का उपयोग केवल समस्या दर्शाने के लिए करें। tone="critical" और tone="warning" को उस progress के लिए रखें जो किसी समस्या की ओर इशारा करे, जैसे पूरी तरह इस्तेमाल हो चुकी कोई सीमा। सामान्य चल रहे काम को default tone पर ही रहने दें।

<SProgress accessibilityLabel="Importing products" :value="120" :max="300" />
<SText>120 of 300 products imported</SText>

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

उदाहरण

Upload next file (40%)

<script setup>
import { ref } from 'vue'
import { SProgress, SButton } from 'polaris-vue-elements'

const uploaded = ref(40)

function advance() {
  uploaded.value = Math.min(uploaded.value + 20, 100)
}
</script>

<template>
  <!-- determinate: bind numeric props, don't write them as string attributes -->
  <SProgress accessibilityLabel="Import progress" :value="uploaded" :max="100" />

  <!-- toned -->
  <SProgress accessibilityLabel="Sync progress" tone="success" :value="80" :max="100" />

  <!-- indeterminate: omit `value` entirely -->
  <SProgress accessibilityLabel="Preparing export" />

  <SButton @click="advance">Upload next file ({{ uploaded }}%)</SButton>
</template>

Props

Prop	Type	विवरण
accessibilityLabel	string	screen readers जैसी assistive technologies के लिए component का उद्देश्य या content बताने वाला label। जब केवल दिखाई देने वाला content स्पष्ट रूप से न बताए कि किस चीज़ की progress हो रही है, तब अतिरिक्त संदर्भ देने के लिए इसका उपयोग करें।
max	number	task के लिए कुल कितना काम आवश्यक है। यह 0 से बड़ा होना चाहिए।
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	component का semantic अर्थ और color treatment। - auto: context के आधार पर अपने आप तय होता है। - neutral: बिना किसी विशेष उद्देश्य की सामान्य जानकारी। - info: जानकारी देने वाली सामग्री या उपयोगी सुझाव। - success: सकारात्मक परिणाम या सफल states। - caution: सलाह देने वाली सूचनाएँ जिन पर ध्यान देना ज़रूरी है। - warning: संभावित समस्याओं के बारे में महत्वपूर्ण चेतावनियाँ। - critical: तत्काल समस्याएँ या destructive actions।
value	number	task का कितना हिस्सा पूरा हो चुका है, 0 और max के बीच की संख्या के रूप में। value के बिना progress indeterminate होती है: task चल रहा है, लेकिन यह संकेत नहीं है कि इसमें कितना समय लगेगा।