SParagraph <s-paragraph>

Body text का एक block। SParagraph Shopify के Polaris <s-paragraph> web component का typed Vue 3 wrapper है।

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

Best practices

• Paragraphs छोटे रखें। बिना jargon के सरल भाषा में दो से चार वाक्यों का लक्ष्य रखें। Merchants अक्सर सरसरी नज़र से पढ़ते हैं, इसलिए लंबे content को छोटे टुकड़ों में बाँटें।
• इरादा दर्शाने के लिए tone का उपयोग करें। tone="critical" errors के लिए, "caution" चेतावनियों के लिए और "success" पुष्टियों के लिए उपयुक्त है। केवल रंग पर निर्भर रहने के बजाय हमेशा उसे स्पष्ट शब्दों का साथ दें।
• Accessibility को ध्यान में रखकर design करें। उस context के लिए केवल screen reader वाला text (accessibilityVisibility="exclusive") जोड़ें जिसे देख सकने वाले merchants layout या icons से समझ लेते हैं, और सुनिश्चित करें कि tone वाले text में पढ़ने के लिए पर्याप्त contrast बना रहे।
• Lines को सावधानी से clamp करें। lineClamp cards या previews जैसी तंग जगहों में मदद करता है, लेकिन truncation को कभी भी महत्वपूर्ण जानकारी छिपाने न दें।

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

उदाहरण

Default paragraph text, used for the bulk of body copy.A subdued paragraph, useful for secondary or helper text.A critical paragraph, useful for inline error copy. A long paragraph that demonstrates lineClamp truncating its content after a fixed number of lines instead of wrapping indefinitely down the page.

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

<template>
  <SParagraph>Default paragraph text, used for the bulk of body copy.</SParagraph>
  <SParagraph color="subdued">A subdued paragraph, useful for secondary or helper text.</SParagraph>
  <SParagraph tone="critical">A critical paragraph, useful for inline error copy.</SParagraph>
  <SParagraph :lineClamp="2" style="max-width: 280px">
    A long paragraph that demonstrates lineClamp truncating its content after a fixed
    number of lines instead of wrapping indefinitely down the page.
  </SParagraph>
</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"	paragraph का font size। नामित values अपने अनुरूप line-height और letter-spacing भी लागू करती हैं।
fontVariantNumeric	"auto" | "normal" | "tabular-nums"	font की numeric properties सेट करें।
fontWeight	"base" | "auto" | "medium" | "semibold" | "bold"	paragraph का font weight।
lineClamp	number	text सामग्री को निर्दिष्ट lines की संख्या तक truncate करता है।
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	paragraph text पर लागू semantic tone, जो अर्थ बताने के लिए उसका color बदलता है। - info: जानकारी देने वाली सामग्री या उपयोगी सुझाव (नीला)। - success: सकारात्मक परिणाम या सफल states (हरा)। - warning: संभावित समस्याओं के बारे में महत्वपूर्ण चेतावनियाँ (नारंगी)। - critical: तत्काल समस्याएँ या destructive actions (लाल)। - caution: सलाह देने वाली सूचनाएँ जिन पर ध्यान देना ज़रूरी है (पीला)।

Slots

Slot	विवरण
default	paragraph component के अंदर दिखाई जाने वाला paragraph text, जो उपयुक्त styling के साथ संबंधित text का एक block प्रस्तुत करता है।