SBox <s-box>

Padding, background, border, radius और sizing के लिए एक सामान्य container। SBox Shopify के Polaris <s-box> web component का typed Vue 3 wrapper है।

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

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

Best practices

• इसे एक सामान्य container के रूप में इस्तेमाल करें। SBox content को समूह में रखने के लिए spacing, borders और backgrounds संभालता है। जब आपको rows या columns जैसी कोई खास व्यवस्था चाहिए, तो इसके बजाय SStack या SGrid इस्तेमाल करें।
• पहले देखें कि कोई ज़्यादा अर्थपूर्ण component मौजूद है या नहीं। अगर SSection या SBanner जैसा कोई component पहले से बताता है कि content क्या है, तो उसे प्राथमिकता दें। खास मकसद से बने components का उद्देश्य ज़्यादा साफ़ होता है और accessibility बेहतर होती है।
• छोटी स्क्रीन के लिए योजना बनाएँ। जो layout desktop पर सही दिखता है वह mobile पर बिगड़ सकता है, इसलिए तय sizes पर अड़े रहने के बजाय responsive values से spacing और layout को समायोजित करें।
• Regions और interactive content का वर्णन करें। जब कोई box एक अलग region को चिह्नित करता है या उसमें interactive content होता है, तो accessibilityRole और accessibilityLabel सेट करें, ताकि screen reader users संरचना को समझ सकें और उसमें आगे-पीछे जा सकें।
• Nesting कम रखें। Boxes के अंदर boxes रखने से markup जटिल हो जाता है और styling को बनाए रखना मुश्किल हो जाता है। कोई सरल संरचना या ज़्यादा उपयुक्त layout component खोजें।

<SBox accessibilityRole="region" accessibilityLabel="Shipping summary" padding="base" border="base">
  <!-- … -->
</SBox>

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

उदाहरण

background="subdued"background="strong"bordered box

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

<template>
  <div style="display: flex; gap: 8px; flex-wrap: wrap">
    <SBox background="subdued" padding="base" borderRadius="200">
      <SText>background="subdued"</SText>
    </SBox>
    <SBox background="strong" padding="base" borderRadius="200">
      <SText>background="strong"</SText>
    </SBox>
    <SBox
      background="base"
      padding="base"
      borderRadius="200"
      borderWidth="small"
      borderColor="strong"
      borderStyle="solid"
    >
      <SText>bordered box</SText>
    </SBox>
  </div>
</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 के लिए अदृश्य हो जाता है।
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	box component के भीतर दिखाया जाने वाला content, जो अन्य components को व्यवस्थित और style करने के लिए एक लचीले container का काम करता है।