SGridItem <s-grid-item>

Grid का एक child जो कई columns या rows तक फैल सकता है। SGridItem Shopify के Polaris <s-grid-item> web component का typed Vue 3 wrapper है।

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

उदाहरण

Column 1Column 2Column 1Column 2

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

<template>
  <!-- Each SGridItem is one cell placed into the parent SGrid's tracks. -->
  <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 में बना रहता है।
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 का समर्थन करता है।
display	"auto" | "none"	component का बाहरी display type। बाहरी type तय करता है कि component flow layout में कैसे भाग लेता है। - auto component का प्रारंभिक मान। वास्तविक मान component और context पर निर्भर करता है। - none component को display से छिपा देता है और उसे accessibility tree से हटा देता है, जिससे वह screen readers के लिए अदृश्य हो जाता है।
gridColumn	"auto"	item जितने columns में फैलेगा उनकी संख्या। grid-column property के बारे में और जानें।
gridRow	"auto"	item जितनी rows में फैलेगा उनकी संख्या। grid-row property के बारे में और जानें।
inlineSize	"auto" | "0"	horizontal writing modes में चौड़ाई, या vertical writing modes में ऊँचाई। text की दिशा के अनुसार ढलने वाले flow-relative sizing के लिए इसका उपयोग करें। inline-size के बारे में और जानें।
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 के रूप में हो।

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

Slots

Slot	विवरण
default	grid item component के भीतर दिखाया जाने वाला content, जो grid layout में एक cell को दर्शाता है और कई columns या rows में फैल सकता है।