SSection <s-section>

संबंधित content को समूहित करता है, वैकल्पिक heading, subheading और actions के साथ। SSection Shopify के Polaris <s-section> web component का typed Vue 3 wrapper है।

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

Best practices

• साथ रहने वाले content को समूह में रखें। हर section को एक ही, सुसंगत काम दें, चाहे वह संबंधित जानकारी हो या संबंधित controls; तब वह एक visual container की तरह काम करता है और page की संरचना में अर्थ जोड़ता है।
• वर्णनात्मक headings लिखें। Merchants अपना रास्ता खोजने के लिए heading पर सरसरी नज़र डालते हैं, इसलिए किसी सामान्य title का सहारा लेने के बजाय बताएँ कि अंदर क्या है।
• केवल उतनी गहराई तक nest करें जितनी content को ज़रूरत हो। Nested section यह नहीं बदलता कि वह कैसा दिखता है, बल्कि heading hierarchy और page की रूपरेखा को प्रभावित करता है। इसे अधिकतम दो या तीन स्तरों तक रखें, और केवल तभी nest करें जब अतिरिक्त संरचना content को अधिक स्पष्ट बनाए।
• जब content किनारे से किनारे तक फैलना चाहिए तो padding हटा दें। Tables या images जैसी चीज़ों के लिए जिन्हें section भरना चाहिए, padding="none" का उपयोग करें, फिर जाँचें कि अंदर के content में अपनी पर्याप्त spacing बनी रहे।
• जब heading पर्याप्त न हो तो accessibilityLabel जोड़ें। जब screen पर दिखने वाली heading screen readers का उपयोग करने वालों के लिए section का उद्देश्य स्पष्ट न करे, तो उन्हें ऐसा label दें जो छूटा हुआ context पूरा करे।
• सही header slot चुनें। Heading को ही बदलने वाले विवरण, जैसे tooltip या कोई गिनती, accessory में रखें। पूरे section के बारे में जानकारी, जैसे status badge, supplemental में रखें। Button या menu जैसे actions accessory में आते हैं, क्योंकि supplemental उन्हें स्वीकार नहीं करता।

<SSection heading="Products" padding="none">
  <STable>
    <!-- … -->
  </STable>
</SSection>

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

उदाहरण

123 Main Street, Ottawa, ON, CanadaDelivery instructions: leave at front door.

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

<template>
  <SSection heading="Shipping address">
    <SParagraph>123 Main Street, Ottawa, ON, Canada</SParagraph>
    <SDivider />
    <SParagraph color="subdued">Delivery instructions: leave at front door.</SParagraph>
  </SSection>
</template>

Props

Prop	Type	विवरण
accessibilityLabel	string	screen readers जैसी assistive technologies के लिए component का उद्देश्य या content बताने वाला label। जब केवल दिखाई देने वाला content component का उद्देश्य स्पष्ट रूप से न बताए, तब अतिरिक्त संदर्भ देने के लिए इसका उपयोग करें।
heading	string	section के ऊपर दिखाई जाने वाला heading text। यह heading section की सामग्री को एक शीर्षक देती है और सही document संरचना बनाए रखने के लिए nesting depth के आधार पर अपने आप उपयुक्त semantic heading level (h2, h3, h4) का उपयोग करती है।
padding	"base" | "none"	element की सामग्री के सभी किनारों पर लागू padding। - base: element के लिए उपयुक्त padding लागू करता है। ध्यान दें कि यदि किसी विशेष context में यही सही design निर्णय है, तो इसका परिणाम बिना padding के भी हो सकता है। - none: element की सामग्री से सारी padding हटा देता है। यह तब उपयोगी हो सकता है जब section के अंदर के elements को section के किनारे तक फैलाना हो, जैसे पूरी चौड़ाई वाली image। ऐसे में बाकी सामग्री के लिए वांछित padding वापस लाने के लिए 'base' padding वाले s-box का उपयोग करें। heading और header actions अपनी padding बनाए रखते हैं, इसलिए उन्हें none के साथ जोड़ा जा सकता है।
subheading	string	heading को विस्तार देने वाला सहायक text, जो उसके नीचे हल्के (subdued) रूप में render होता है। यह heading नहीं है: यह document outline में कोई entry नहीं जोड़ता, section के children का heading level नहीं बदलता, और heading के हिस्से के रूप में इसकी घोषणा नहीं होती। जो भी चीज़ इस section को दूसरे section से अलग करती है, उसे heading में रखें, क्योंकि heading से navigate करने वाला व्यक्ति वही सुनता है।

Slots

Slot	विवरण
default	section component के अंदर दिखाई जाने वाली सामग्री, जो संबंधित elements को एक वैकल्पिक heading के साथ एक तार्किक इकाई में समूहित करता है।
accessory	heading को और स्पष्ट करने वाली अतिरिक्त संदर्भ जानकारी, जो heading text के बगल में inline render होती है। केवल Badge, Icon, Button, Menu, Text, Avatar, Thumbnail और Tooltip elements स्वीकार करता है। Text में tone, fontSize और fontWeight auto होने चाहिए; Icon, Avatar और Thumbnail में size="base" होना चाहिए; Badge में size="base" और color="base" होने चाहिए; Button में inlineSize="auto" होना चाहिए। जिस Tooltip की ओर किसी accessory element का interestFor इशारा करता है, उसे यहाँ उसके बगल में slot किया जा सकता है।
graphic	heading को मज़बूती देने वाला एक सजावटी visual, जो heading से पहले render होता है। यह size base वाला एक Icon, या size large वाला केवल-icon Badge (icon सेट, कोई text content नहीं) स्वीकार करता है। heading ही section की पहचान बताती है, इसलिए assistive technologies इस content की घोषणा नहीं करतीं, और जब section में कोई heading नहीं होती तो यह बिल्कुल render नहीं होता।
primary-action	प्राथमिक action button या link, जो इस context में उपलब्ध मुख्य या सबसे महत्वपूर्ण action को दर्शाता है। स्पष्ट hierarchy बनाने के लिए आमतौर पर इसे secondary actions की तुलना में अधिक visual प्रमुखता के साथ दिखाया जाता है।
secondary-actions	अतिरिक्त action buttons या links जो वैकल्पिक या सहायक actions देते हैं। primary action की तुलना में इन्हें दृश्य रूप से कम ज़ोर दिया जाता है। एक ButtonGroup जिसमें एक action और उसके Menu का केवल-icon activator हो, chevron activator के साथ एक segmented group के रूप में render होता है। group को एक accessibilityLabel चाहिए, और उसमें ठीक एक text वाला Button होना चाहिए, जिसके बाद एक बिना text वाला Button हो जिसमें accessibilityLabel और Menu खोलने वाला commandFor हो; दोनों का variant secondary या auto होना चाहिए।
supplemental	status या metadata जो heading को स्पष्ट करने के बजाय पूरे section का वर्णन करता है, और header के inline-end पर किसी भी action से पहले render होता है। यह कोई action नहीं है। केवल Badge, Avatar, Text, Icon, Thumbnail और Tooltip elements स्वीकार करता है, accessory जैसी ही prop सीमाओं के साथ।