SText <s-text>

Tone, weight और emphasis styling वाला inline text। SText Shopify के Polaris <s-text> web component का typed Vue 3 wrapper है।

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

Best practices

• एक semantic type चुनें। मुख्य शब्दों या वाक्यांशों को चिह्नित करने के लिए "strong", डाक या email पते के लिए "address", और ऐसे text के लिए "redundant" चुनें जो screen reader उपयोगकर्ताओं को context देता है जब वही content पहले से screen पर दिखाई देता हो। सही type चुनने से assistive technology यह व्यक्त कर पाती है कि text का क्या अर्थ है।
• ज़ोर कम से कम दें। type="strong" को पूरे वाक्यों पर नहीं, बल्कि किसी वाक्य के मुख्य शब्दों या संख्याओं पर लगाएँ; बहुत अधिक ज़ोर अपना प्रभाव खो देता है और text को scan करना कठिन बना देता है।
• Inline status के लिए tone का उपयोग करें। "critical", "success" या "caution" जैसे tones किसी status की ओर ध्यान खींचते हैं, लेकिन संदेश को रंग पर छोड़ने के बजाय उनके साथ स्पष्ट शब्दों का उपयोग करें।
• महत्वपूर्ण चीज़ों को फीका न करें। color="subdued" timestamps और metadata के लिए उपयुक्त है, लेकिन उस महत्वपूर्ण जानकारी के लिए इससे बचें जिसे merchants को पढ़ना ही चाहिए।

<SParagraph>
  Order shipped to <SText type="address">150 Elgin St, Ottawa</SText>.
  <SText type="strong">Payment pending.</SText>
</SParagraph>

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

उदाहरण

Default textStrong textSubdued textSuccess toneCritical toneTabular numbers: 10 200 3000

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

<template>
  <SText>Default text</SText>
  <SText type="strong">Strong text</SText>
  <SText color="subdued">Subdued text</SText>
  <SText tone="success">Success tone</SText>
  <SText tone="critical">Critical tone</SText>
  <SText fontVariantNumeric="tabular-nums">Tabular numbers: 10 200 3000</SText>
</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 को अधिक या कम तीव्र बनाएँ।
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"	text का font size। नामित values अपने अनुरूप line-height और letter-spacing भी लागू करती हैं।
fontVariantNumeric	"auto" | "normal" | "tabular-nums"	font की numeric properties सेट करें।
fontWeight	"base" | "auto" | "medium" | "semibold" | "bold"	text का font weight।
interestFor	string	उस component की ID जिसे इस component पर interest (जैसे hover और focus) पर प्रतिक्रिया देनी चाहिए।
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	text पर लागू semantic tone, जो अर्थ बताने के लिए उसका color बदलता है। - info: जानकारी देने वाली सामग्री या उपयोगी सुझाव (नीला)। - success: सकारात्मक परिणाम या सफल states (हरा)। - warning: संभावित समस्याओं के बारे में महत्वपूर्ण चेतावनियाँ (नारंगी)। - critical: तत्काल समस्याएँ या destructive actions (लाल)। - auto: context के आधार पर अपने आप तय होता है। - neutral: बिना किसी विशेष उद्देश्य की सामान्य जानकारी (स्लेटी)। - caution: सलाह देने वाली सूचनाएँ जिन पर ध्यान देना ज़रूरी है (पीला)।
type	"strong" | "address" | "redundant" | "generic"	text सामग्री का semantic type और styling treatment। text पर लगी अन्य presentation properties डिफ़ॉल्ट styling को override करती हैं। - strong: text पर विशेष ज़ोर देता है, आमतौर पर bold में दिखता है। - generic: बिना किसी विशेष semantic अर्थ या styling वाला सामान्य text। - address: text को संपर्क जानकारी के रूप में चिह्नित करता है, जैसे कोई भौतिक पता या email address। - redundant: बताता है कि text screen reader context के लिए दोहराई गई या अनावश्यक जानकारी है।

Slots

Slot	विवरण
default	text component के अंदर दिखाई जाने वाली text सामग्री, जो निर्दिष्ट text type के अनुसार उपयुक्त semantic अर्थ और styling लागू करता है।