SHeading <s-heading>

एक heading जो पेज के किसी section का शीर्षक होती है। SHeading Shopify के Polaris <s-heading> web component का typed Vue 3 wrapper है।

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

Best practices

• हर मुख्य section को एक heading दें। Headings interface की एक रूपरेखा बनाते हैं जो merchants को रास्ता ढूँढने और यह समझने में मदद करती है कि content कैसे व्यवस्थित है।
• Heading level component को चुनने दें। यह nesting की गहराई के आधार पर HTML level (h2, h3, h4) तय करता है, ताकि screen readers को सही document structure मिले और आपको levels हाथ से सेट न करने पड़ें।
• स्पष्ट रहें। बताएँ कि section में क्या है, जैसे सिर्फ़ "Details" के बजाय "Product details" या "Customer details"।
• Lines को तभी clamp करें जब ज़रूरी हो। lineClamp cards जैसी तंग जगहों में लंबे headings को काबू में रख सकता है, लेकिन heading को छोटा करने से वह जानकारी छिप सकती है जो merchants को चाहिए।
• मिलते-जुलते headings को एक ही तरह style करें। एक ही तरह के content के headings, जैसे किसी लिस्ट के हर card के, एक जैसे दिखने चाहिए।

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

उदाहरण

Default headingRenders as a semantic heading element by default.Presentational headingSame visual style, but stripped from the accessibility tree's heading structure. A long heading that gets truncated to a single line via lineClamp

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

<template>
  <SHeading>Default heading</SHeading>
  <SParagraph>Renders as a semantic heading element by default.</SParagraph>

  <SHeading accessibilityRole="presentation">Presentational heading</SHeading>
  <SParagraph>Same visual style, but stripped from the accessibility tree's heading structure.</SParagraph>

  <SHeading :lineClamp="1" style="max-width: 220px">
    A long heading that gets truncated to a single line via lineClamp
  </SHeading>
</template>

Props

Prop	Type	विवरण
accessibilityRole	"heading" | "presentation" | "none"	component की सामग्री का semantic अर्थ। सेट करने पर, assistive technologies इस role का उपयोग उपयोगकर्ताओं को page पर navigate करने में मदद के लिए करती हैं। - heading: assistive technologies के लिए element को heading के रूप में पहचानता है। - none: heading element से semantic अर्थ हटा देता है। - presentation: heading element से semantic अर्थ हटा देता है।
accessibilityVisibility	"visible" | "hidden" | "exclusive"	element की visibility बदलता है। - visible: element सभी users को दिखाई देता है। - hidden: element accessibility tree से हटा दिया जाता है लेकिन दिखाई देता रहता है। - exclusive: element दृश्य रूप से छिपा रहता है लेकिन accessibility tree में बना रहता है।
fontSize	"base" | "auto" | "small" | "large" | "large-100" | "large-200" | "large-300" | "large-400"	heading का font size। नामित मान अपने अनुरूप line-height और letter-spacing भी लागू करते हैं: - 'small' का मतलब headingXs - 'base' का मतलब headingSm - 'large' / 'large-100' का मतलब headingMd - 'large-200' का मतलब headingLg - 'large-300' का मतलब headingXl - 'large-400' का मतलब heading2xl
lineClamp	number	text सामग्री को निर्दिष्ट lines की संख्या तक truncate करता है।

Slots

Slot	विवरण
default	heading component के अंदर दिखाई जाने वाला heading text, जो सामग्री के लिए एक शीर्षक या section header प्रदान करता है।