SThumbnail <s-thumbnail>

किसी product या file की एक छोटी, तय आकार की preview image। SThumbnail Shopify के Polaris <s-thumbnail> web component का typed Vue 3 wrapper है।

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

Best practices

• सबसे तंग जगहों के लिए size="small-200"। इसका उपयोग केवल वहीं करें जहाँ जगह बहुत सीमित हो।
• छोटी जगहों के लिए size="small"। इसका उपयोग तब करें जब thumbnail को किसी compact area में फ़िट होना हो।
• Default रूप से size="base"। जब तक layout को कुछ और न चाहिए, यहीं से शुरू करें।
• जब image मुख्य केंद्र हो तो size="large"। इसका उपयोग तब करें जब thumbnail ध्यान का मुख्य बिंदु हो।

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

उदाहरण

नीचे दी गई images picsum.photos से load होती हैं, जो एक third-party placeholder image service है; इनका इस्तेमाल सिर्फ़ demo के लिए किया गया है।

<script setup>
import { SThumbnail } from 'polaris-vue-elements'
</script>

<template>
  <SThumbnail src="https://picsum.photos/seed/polaris-thumb/100" alt="Product photo" size="small" />
  <SThumbnail src="https://picsum.photos/seed/polaris-thumb/100" alt="Product photo" size="base" />
  <SThumbnail src="https://picsum.photos/seed/polaris-thumb/100" alt="Product photo" size="large" />

  <!-- No src: renders a placeholder -->
  <SThumbnail alt="Product photo not yet uploaded" size="base" />
</template>

Props

Prop	Type	विवरण
alt	string	image का वर्णन करने वाला वैकल्पिक text, ताकि पढ़ने वाला समझ सके कि image किस बारे में है। यह assistive technology इस्तेमाल करने वाले users और देख सकने वाले users, दोनों के लिए बेहद उपयोगी है। अच्छी तरह लिखा गया विवरण दृष्टिबाधित लोगों को non-text content का उपयोग करने में सक्षम बनाता है। जब कोई screen reader किसी s-image पर पहुँचता है, तो विवरण पढ़कर सुनाया जाता है। अगर कोई image load नहीं हो पाती, जैसे कमज़ोर connection के कारण, तो उसकी जगह screen पर alt दिखाया जाता है। इसका फ़ायदा यह है कि देख सकने वाले खरीदार को पता चलता है कि यहाँ एक image load होनी थी, और विकल्प के रूप में वे text content का उपयोग कर पाते हैं। और जानने के लिए वैकल्पिक text लिखते समय ध्यान रखने वाली बातें पढ़ें।
loading	"eager" | "lazy"	image का loading behavior तय करता है: - eager: image को तुरंत load करता है, चाहे वह visible viewport में कहीं भी हो। - lazy: image का loading तब तक टालता है जब तक वह viewport से एक निश्चित दूरी तक न पहुँच जाए।
size	"base" | "small-200" | "small-100" | "small" | "large" | "large-100"	product thumbnail image का आकार। - small-200: सबसे छोटा thumbnail आकार, compact product lists या tables के लिए आदर्श। - small-100: बहुत छोटा thumbnail, घने layouts के लिए उपयुक्त। - small: कम जगह वाले contexts के लिए छोटा thumbnail। - base: डिफ़ॉल्ट आकार जो दृश्यता और जगह की बचत में संतुलन रखता है। - large: featured products या विस्तृत views के लिए बड़ा thumbnail। - large-100: product के प्रमुख प्रदर्शन के लिए बहुत बड़ा thumbnail।
src	string	image का source (या तो कोई remote URL या कोई local file resource)। जब image load हो रही हो या कोई src न दिया गया हो, तो एक placeholder render होगा।

Events

Event	Type
error	CustomEvent
load	CustomEvent

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