SAvatar <s-avatar>

किसी व्यक्ति या business की image दिखाता है, या image न होने पर उनके initials। SAvatar Shopify के Polaris <s-avatar> web component का typed Vue 3 wrapper है।

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

Best practices

• संदर्भ के अनुसार साइज़ चुनें। टेबल और लिस्ट जैसे घने layouts के लिए छोटा size चुनें, और प्रोफ़ाइल पेजों पर बड़ा, जहाँ व्यक्ति ही मुख्य केंद्र होता है।
• उपयोगी alt text लिखें। alt में बताएँ कि avatar किसे या किस चीज़ को दर्शाता है, जैसे किसी व्यक्ति या कंपनी का नाम। अगर वह नाम पहले से avatar के पास text के रूप में दिख रहा है, तो इसके बजाय खाली alt रखें।
• इसे उसी के पास रखें जिसे यह दर्शाता है। Avatar को ठीक उस नाम या entity के बगल में रखें जिसका वह प्रतिनिधित्व करता है, ताकि लिस्ट, टेबल और cards में दोनों का संबंध साफ़ दिखे।

<SAvatar alt="Sarah Chen" initials="SC" size="large" />

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

उदाहरण

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

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

<template>
  <SAvatar src="https://picsum.photos/seed/polaris-avatar/200" alt="Photo of a customer" size="small" />
  <SAvatar src="https://picsum.photos/seed/polaris-avatar/200" alt="Photo of a customer" size="base" />
  <SAvatar src="https://picsum.photos/seed/polaris-avatar/200" alt="Photo of a customer" size="large" />

  <!-- No src: falls back to initials -->
  <SAvatar initials="AL" alt="Ada Lovelace" size="large" />
</template>

Props

Prop	Type	विवरण
alt	string	accessibility के लिए avatar का वर्णन करने वाला वैकल्पिक text। यह assistive technology इस्तेमाल करने वाले users के लिए avatar का text विवरण देता है और avatar load न होने पर fallback का काम करता है। अच्छी तरह लिखा गया विवरण दृष्टिबाधित लोगों को non-text content समझने में मदद करता है। जब कोई screen reader किसी avatar पर पहुँचता है, तो वह यह विवरण पढ़कर सुनाता है। जब avatar load नहीं होता, तो यह text screen पर दिखता है, जिससे सभी users समझ पाते हैं कि वहाँ कौन-सा content होना था। प्रभावी alt text लिखने और alt attribute के बारे में और जानें।
initials	string	जब कोई image न दी गई हो या वह load न हो पाए, तब avatar में दिखाए जाने वाले initials। आमतौर पर एक या दो अक्षर जो किसी व्यक्ति के पहले और अंतिम नाम के initials दर्शाते हैं, जैसे John Doe के लिए "JD"।
size	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "large-200"	avatar image का आकार। - small-200: बहुत छोटा avatar, compact displays या कई items वाली lists के लिए उपयुक्त। - small-100: small का alias। - small: छोटा avatar, secondary contexts या तंग layouts के लिए अच्छा। - base: डिफ़ॉल्ट आकार जो अधिकांश contexts में अच्छा काम करता है। - large: ज़ोर देने के लिए या जब avatar मुख्य केंद्र हो, तब बड़ा avatar। - large-100: large का alias। - large-200: प्रमुख प्रदर्शन के लिए बहुत बड़ा avatar।
src	string	avatar image का URL या path। दिए जाने पर image को initials से अधिक प्राथमिकता मिलती है। अगर image load नहीं होती या धीरे load होती है, तो fallback के रूप में initials render होंगे।

Events

Event	Type
error	Event
load	Event

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