SGrid <s-grid>

Content को rows और columns में व्यवस्थित करने के लिए एक CSS grid container। SGrid Shopify के Polaris <s-grid> web component का typed Vue 3 wrapper है।

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

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

Best practices

• छोटी स्क्रीन के लिए योजना बनाएँ। जो grid desktop पर काम करता है वह mobile पर बिखर सकता है। एक ही layout तय करने के बजाय सोचें कि कम चौड़ाई पर इसे कैसे reflow होना या फिर से व्यवस्थित होना चाहिए।
• एक जैसी spacing इस्तेमाल करें। Items के बीच समान gaps layout को एक स्थिर लय देते हैं और उसे स्कैन करना आसान बनाते हैं, इसलिए एक ही grid में spacing के अलग-अलग तरीके न मिलाएँ।
• उस content का ध्यान रखें जो फ़िट नहीं होता। Cells के आयाम तय होते हैं लेकिन content की लंबाई बदलती रहती है। पहले से तय करें कि बहुत लंबा या चौड़ा content wrap होगा, truncate होगा या scroll होगा।
• जब सरल component काफ़ी हो तो वही इस्तेमाल करें। SGrid शक्तिशाली है लेकिन जटिलता बढ़ाता है, इसलिए जाँच लें कि क्या कोई सरल layout component काम कर देगा, और grid को उन मामलों के लिए रखें जिन्हें इसकी क्षमताओं की ज़रूरत हो।

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

उदाहरण

Column 1Column 2Column 1Column 2

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

<template>
  <!-- SGrid controls the track layout (columns/rows/gap); each SGridItem is a cell. -->
  <SGrid gridTemplateColumns="1fr 1fr" gap="base">
    <SGridItem>
      <SBox background="subdued" padding="base" borderRadius="200">
        <SText>Column 1</SText>
      </SBox>
    </SGridItem>
    <SGridItem>
      <SBox background="subdued" padding="base" borderRadius="200">
        <SText>Column 2</SText>
      </SBox>
    </SGridItem>
    <SGridItem>
      <SBox background="strong" padding="base" borderRadius="200">
        <SText>Column 1</SText>
      </SBox>
    </SGridItem>
    <SGridItem>
      <SBox background="strong" padding="base" borderRadius="200">
        <SText>Column 2</SText>
      </SBox>
    </SGridItem>
  </SGrid>
</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)	grid को block axis के साथ align करता है। यह placeContent की block value को override करता है।
alignItems	"normal" | "stretch" | "baseline" | "first baseline" | "last baseline" | "center" | "start" | "end" … (6 more)	grid items को block axis के साथ align करता है।
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 हो
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 हो
gridTemplateColumns	string	grid के columns और उनके sizes। स्वीकार करता है: - Track sizing values, जैसे 1fr auto - एक responsive value string, जिसमें query value के रूप में समर्थित track sizing values हों
gridTemplateRows	string	grid की rows और उनके आकार। स्वीकार करता है: - Track sizing मान, जैसे 1fr auto - एक responsive value string, जिसमें समर्थित track sizing मान query value के रूप में हों
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)	grid को inline axis के साथ align करता है। यह placeContent की inline value को override करता है।
justifyItems	"normal" | "stretch" | "baseline" | "first baseline" | "last baseline" | "center" | "start" | "end" … (6 more)	grid items को inline axis के साथ align करता है।
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 के रूप में हो।
placeContent	"normal normal" | "normal stretch" | "normal center" | "normal start" | "normal end" | "normal unsafe center" | "normal unsafe start" | "normal unsafe end" … (3 more)	justify-content और align-content के लिए shorthand property।
placeItems	AlignItemsKeyword | "normal normal" | "normal stretch" | "normal baseline" | "normal first baseline" | "normal last baseline" | "normal center" | "normal start" … (2 more)	justify-items और align-items के लिए shorthand property।
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	grid component के भीतर दिखाए जाने वाले child elements, जिन्हें configurable columns, rows और spacing वाले लचीले grid layout में रखा जाता है।