SScrollBox <s-scroll-box>

एक container जो content के बाहर निकलने पर उसे scroll करता है। SScrollBox Shopify के Polaris <s-scroll-box> web component का typed Vue 3 wrapper है।

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

उदाहरण

Scrollable row 1Scrollable row 2Scrollable row 3Scrollable row 4Scrollable row 5Scrollable row 6Scrollable row 7Scrollable row 8

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

<template>
  <!-- maxBlockSize only accepts the "none"/"0" keywords, so an arbitrary pixel cap is
       set as a plain style attribute (it passes through untyped, see the quirks guide). -->
  <SScrollBox
    style="max-height: 160px"
    overflow="auto"
    border="base"
    borderRadius="200"
    padding="base"
  >
    <SBox
      v-for="n in 8"
      :key="n"
      padding="small"
      paddingBlockEnd="small"
      borderColor="subdued"
      borderWidth="small"
      borderStyle="solid"
    >
      <SText>Scrollable row {{ n }}</SText>
    </SBox>
  </SScrollBox>
</template>

Props

Prop	Type	विवरण
accessibilityLabel	string	assistive technologies के लिए scroll container का वर्णन करने वाला label।
accessibilityRole	"generic" | "region"	component के content का semantic अर्थ सेट करता है।
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	"auto" | "hidden" | "auto auto" | "auto hidden" | "hidden auto" | "hidden hidden"	element का overflow behavior सेट करता है।
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 के रूप में हो।
scrollMargin	"0" | "0 0" | "0 0 0" | "0 0 0 0"	element के लिए scroll margin (CSS जैसी 1 से 4 value वाली shorthand syntax)।
scrollPadding	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	scroll snap alignment points के लिए offset।
snapType	"none" | "mandatory" | "proximity"	scroll snap behavior नियंत्रित करता है।

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

Events

Event	Type
scroll	CustomEvent
scrolltoedge	CustomEvent

इन्हें <SScrollBox> पर @scroll जैसे listeners से सुनें।

Slots

Slot	विवरण
default	ScrollBox की सामग्री।