SStack <s-stack>

अपने children को एक row या column में एक जैसी spacing और alignment के साथ व्यवस्थित करता है। SStack Shopify के Polaris <s-stack> web component का typed Vue 3 wrapper है।

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

<SStack> के आसपास अपना CSS लिख रहे हैं? Polaris के CSS वेरिएबल (--p-space-*, --p-color-*, …) इस्तेमाल करें, ताकि आपका लेआउट components से मेल खाए।

Best practices

• Spacing से संबंध दर्शाएँ। छोटा gap संकेत देता है कि items एक साथ हैं, जबकि बड़ा gap अलग-अलग समूहों को अलग करता है। ऐसी spacing चुनें जो आपके content की hierarchy से मेल खाए।
• Inline stacks के wrap होने की अपेक्षा रखें। direction="inline" के साथ, जगह ख़त्म होने पर items नई line पर चले जाते हैं। आमतौर पर आप यही चाहते हैं, लेकिन अगर आपको line breaks या कई rows पर सटीक नियंत्रण चाहिए, तो कोई दूसरा layout तरीका अपनाएँ।
• Alignment जान-बूझकर सेट करें। Default alignment अधिकांश layouts के लिए उपयुक्त है। जब items का आकार अलग हो या उन्हें विशेष positioning चाहिए, तो alignItems या justifyContent को समायोजित करें।

<SStack direction="inline" gap="small-200" alignItems="center">
  <SBadge>Draft</SBadge>
  <SText>Last edited today</SText>
</SStack>

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

उदाहरण

Item 1Item 2Item 3

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

<template>
  <SStack direction="inline" gap="large" alignItems="center">
    <SBox background="subdued" padding="base" borderRadius="200">
      <SText>Item 1</SText>
    </SBox>
    <SBox background="subdued" padding="base" borderRadius="200">
      <SText>Item 2</SText>
    </SBox>
    <SBox background="subdued" padding="base" borderRadius="200">
      <SText>Item 3</SText>
    </SBox>
  </SStack>
</template>

Props

Prop	Type	विवरण
accessibilityLabel	string	element का उद्देश्य या content बताने वाला label। सेट होने पर, assistive technologies इस्तेमाल करने वाले users को इसकी घोषणा की जाएगी और उन्हें अधिक संदर्भ मिलेगा। इसका उपयोग केवल तब करें जब element का content assistive technologies इस्तेमाल करने वाले users के लिए पर्याप्त संदर्भ न दे।
accessibilityRole	"generic" | "status" | "main" | "header" | "footer" | "section" | "region" | "aside" … (9 more)	component के content का semantic अर्थ सेट करता है। सेट होने पर, assistive technologies page पर navigate करने में users की मदद के लिए इस role का उपयोग करेंगी।
accessibilityVisibility	"visible" | "hidden" | "exclusive"	element की visibility बदलता है। - visible: element सभी users को दिखाई देता है। - hidden: element accessibility tree से हटा दिया जाता है लेकिन दिखाई देता रहता है। - exclusive: element दृश्य रूप से छिपा रहता है लेकिन accessibility tree में बना रहता है।
alignContent	"normal" | "stretch" | "baseline" | "first baseline" | "last baseline" | "center" | "start" | "end" … (9 more)	content के कई lines में wrap होने पर block axis के साथ lines का वितरण नियंत्रित करता है। यह property केवल wrapping content वाले stacks को प्रभावित करती है। single-line stacks के लिए, इसके बजाय alignItems का उपयोग करें।
alignItems	"normal" | "stretch" | "baseline" | "first baseline" | "last baseline" | "center" | "start" | "end" … (6 more)	block axis के साथ children का alignment नियंत्रित करता है (horizontal writing modes में vertical)। इसका उपयोग items को stack direction के लंबवत align करने के लिए करें - inline stacks में vertically या block stacks में horizontally।
background	"subdued" | "base" | "strong" | "transparent"	component का background color।
blockSize	"auto" | "0"	सामान्य layouts में element का vertical आकार (left-to-right या right-to-left writing modes में ऊँचाई)। block size लिखने की दिशा के अनुसार बदलता है: horizontal layouts में यह ऊँचाई को और vertical layouts में चौड़ाई को नियंत्रित करता है। इससे अलग-अलग text दिशाओं में एक जैसा व्यवहार सुनिश्चित होता है। block-size के बारे में और जानें।
border	BorderShorthand	shorthand syntax से लगाई गई border, जो एक ही property में width, color और style तय करती है।
borderColor	"subdued" | "base" | "strong"	design system के color scale का उपयोग करके border का color। सेट होने पर, यह border property में दी गई color value को override करता है। आवश्यक visual ज़ोर के अनुसार subdued, base या strong में से चुनें।
borderRadius	MaybeAllValuesShorthandProperty<BoxBorderRadii>	design system के radius scale का उपयोग करते हुए element के कोनों की गोलाई। हर कोने के लिए अलग radius तय करने हेतु 1 से 4 मानों वाले syntax का समर्थन करता है। गोल कोने या पूरी तरह गोल elements बनाने के लिए इसका उपयोग करें।
borderStyle	"" | MaybeAllValuesShorthandProperty<BoxBorderStyles>	सभी ओर border की visual style, जैसे solid, dashed या dotted। सेट करने पर, यह border property में दिए गए style मान को override करता है। हर ओर के लिए अलग style तय करने हेतु 1 से 4 मानों वाले syntax का समर्थन करता है।
borderWidth	"" | MaybeAllValuesShorthandProperty<"base" | "small-100" | "small" | "large" | "large-100" | "none">	सभी ओर border की मोटाई। सेट करने पर, यह border property में दिए गए width मान को override करता है। हर ओर के लिए अलग width तय करने हेतु 1 से 4 मानों वाले syntax का समर्थन करता है।
columnGap	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	inline axis में elements के बीच spacing समायोजित करता है। यह gap की column value को override करता है। स्वीकार करता है: - एक अकेली SpacingKeyword value, जैसे large-100 - एक responsive value string, जिसमें query value के रूप में समर्थित SpacingKeyword हो
direction	"block" | "inline"	वह दिशा जिसमें stack के children को stack के अंदर रखा जाता है। स्वीकार करता है: - एक अकेला मान, inline या block - एक responsive value string, जिसमें समर्थित direction मान query value के रूप में हों
display	"auto" | "none"	component का बाहरी display type। बाहरी type तय करता है कि component flow layout में कैसे भाग लेता है। - auto component का प्रारंभिक मान। वास्तविक मान component और context पर निर्भर करता है। - none component को display से छिपा देता है और उसे accessibility tree से हटा देता है, जिससे वह screen readers के लिए अदृश्य हो जाता है।
gap	MaybeResponsive<MaybeTwoValuesShorthandProperty<SpacingKeyword>>	elements के बीच spacing समायोजित करता है। स्वीकार करता है: - दोनों axes पर लागू होने वाली एक अकेली SpacingKeyword value, जैसे large-100 - values की एक जोड़ी, जैसे large-100 large-500, जो क्रमशः inline और block axes सेट करती है - एक responsive value string, जिसमें query value के रूप में समर्थित SpacingKeyword हो
inlineSize	"auto" | "0"	horizontal writing modes में चौड़ाई, या vertical writing modes में ऊँचाई। text की दिशा के अनुसार ढलने वाले flow-relative sizing के लिए इसका उपयोग करें। inline-size के बारे में और जानें।
justifyContent	"normal" | "stretch" | "center" | "start" | "end" | "unsafe center" | "unsafe start" | "unsafe end" … (6 more)	inline axis के साथ children का वितरण नियंत्रित करता है (horizontal writing modes में horizontal)। इसका उपयोग items को stack के primary axis के साथ position करने के लिए करें - inline stacks में horizontally, या कई lines में wrap होने पर block stacks में vertically।
maxBlockSize	"none" | "0"	horizontal writing modes में अधिकतम ऊँचाई, या vertical writing modes में अधिकतम चौड़ाई। element को इस आकार से बड़ा होने से रोकता है। max-block-size के बारे में और जानें।
maxInlineSize	"none" | "0"	horizontal writing modes में अधिकतम चौड़ाई, या vertical writing modes में अधिकतम ऊँचाई। element को इस आकार से बड़ा होने से रोकता है। max-inline-size के बारे में और जानें।
minBlockSize	"0"	horizontal writing modes में न्यूनतम ऊँचाई, या vertical writing modes में न्यूनतम चौड़ाई। element को इस आकार से छोटा होने से रोकता है। min-block-size के बारे में और जानें।
minInlineSize	"0"	horizontal writing modes में न्यूनतम चौड़ाई, या vertical writing modes में न्यूनतम ऊँचाई। element को इस आकार से छोटा होने से रोकता है। min-inline-size के बारे में और जानें।
overflow	"visible" | "hidden"	element का overflow behavior सेट करता है। - hidden: content के element के container से बड़ा होने पर उसे clip कर देता है। element scroll नहीं होगा और users drag करके या mouse के scroll wheel से clip हुआ content नहीं देख पाएँगे। - visible: element के container से बाहर जाने वाला content दिखाई देता है।
padding	MaybeResponsive<MaybeAllValuesShorthandProperty<PaddingKeyword>>	component के सभी किनारों पर लागू padding। flow-relative मानों के साथ 1 से 4 मानों वाले syntax का समर्थन करता है: - 1 मान सभी ओर लागू होता है - 2 मान block (ऊपर/नीचे) और inline (बाएँ/दाएँ) पर लागू होते हैं - 3 मान block-start (ऊपर), inline (बाएँ/दाएँ) और block-end (नीचे) पर लागू होते हैं - 4 मान block-start (ऊपर), inline-end (दाएँ), block-end (नीचे) और inline-start (बाएँ) पर लागू होते हैं उदाहरण:* base, large none, base large-100 base small हटाई गई padding वाले निकटतम container से padding inherit करने के लिए auto का उपयोग करें। एक responsive value string भी स्वीकार करता है, जिसमें समर्थित PaddingKeyword query value के रूप में हो।
paddingBlock	MaybeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>>	block-direction padding (horizontal writing modes में ऊपर और नीचे)। दोनों ओर के लिए एक value, या block-start और block-end के लिए space से अलग की गई दो values स्वीकार करता है। उदाहरण:* large none ऊपर large और नीचे none लागू करता है। padding की block value को override करता है। query value के रूप में समर्थित PaddingKeyword वाली responsive value string भी स्वीकार करता है।
paddingBlockEnd	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	block-end padding (horizontal writing modes में नीचे)। paddingBlock की block-end value को override करता है। query value के रूप में समर्थित PaddingKeyword वाली responsive value string भी स्वीकार करता है।
paddingBlockStart	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	block-start padding (horizontal writing modes में ऊपर)। paddingBlock की block-start value को override करता है। query value के रूप में समर्थित PaddingKeyword वाली responsive value string भी स्वीकार करता है।
paddingInline	MaybeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>>	inline दिशा की padding (horizontal writing modes में बाएँ और दाएँ)। दोनों ओर के लिए एक मान, या inline-start और inline-end के लिए space से अलग किए गए दो मान स्वीकार करता है। उदाहरण:* large none बाईं ओर large और दाईं ओर none लागू करता है। padding से आए inline मान को override करता है। एक responsive value string भी स्वीकार करता है, जिसमें समर्थित PaddingKeyword query value के रूप में हो।
paddingInlineEnd	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	inline-end padding (LTR writing modes में दाईं ओर, RTL में बाईं ओर)। paddingInline से आए inline-end मान को override करता है। एक responsive value string भी स्वीकार करता है, जिसमें समर्थित PaddingKeyword query value के रूप में हो।
paddingInlineStart	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	inline-start padding (LTR writing modes में बाईं ओर, RTL में दाईं ओर)। paddingInline से आए inline-start मान को override करता है। एक responsive value string भी स्वीकार करता है, जिसमें समर्थित PaddingKeyword query value के रूप में हो।
rowGap	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	block axis में elements के बीच spacing समायोजित करता है। यह gap की row value को override करता है। स्वीकार करता है: - एक अकेली SpacingKeyword value, जैसे large-100 - एक responsive value string, जिसमें query value के रूप में समर्थित SpacingKeyword हो

पढ़ने में आसानी के लिए ऊपर के कुछ type columns छोटे किए गए हैं; पूरा union library के generate किए गए TypeScript types (src/lib/generated/types.ts) में उपलब्ध है।

Slots

Slot	विवरण
default	stack component के भीतर दिखाए जाने वाले child elements, जिन्हें एक समान spacing के साथ vertically या horizontally रखा जाता है।