SScrollBox <s-scroll-box>

콘텐츠가 넘칠 때 스크롤되는 컨테이너입니다. SScrollBox은(는) Shopify Polaris <s-scroll-box> web component를 위한 타입이 지정된 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	타입	설명
accessibilityLabel	string	보조 기술을 위해 스크롤 컨테이너를 설명하는 레이블입니다.
accessibilityRole	"generic" | "region"	컴포넌트 콘텐츠의 의미(semantic)를 설정합니다.
accessibilityVisibility	"visible" | "hidden" | "exclusive"	요소의 표시 여부를 변경합니다. - visible: 요소가 모든 사용자에게 표시됩니다. - hidden: 요소가 접근성 트리에서 제거되지만 화면에는 표시됩니다. - exclusive: 요소가 시각적으로는 숨겨지지만 접근성 트리에는 남아 있습니다.
background	"subdued" | "base" | "strong" | "transparent"	컴포넌트의 배경색입니다.
blockSize	"auto" | "0"	표준 레이아웃에서 요소의 세로 크기(왼쪽에서 오른쪽 또는 오른쪽에서 왼쪽 쓰기 모드에서는 높이)입니다. 블록 크기는 쓰기 방향에 따라 조정됩니다. 가로 레이아웃에서는 높이를, 세로 레이아웃에서는 너비를 제어합니다. 이를 통해 다양한 텍스트 방향에서 일관된 동작을 보장합니다. block-size에 대해 자세히 알아보세요.
border	BorderShorthand	단축 구문을 사용해 너비, 색상, 스타일을 하나의 속성으로 지정하는 테두리입니다.
borderColor	"subdued" | "base" | "strong"	디자인 시스템의 색상 스케일을 사용하는 테두리 색상입니다. 설정하면 border 속성에 지정된 색상 값보다 우선합니다. 필요한 시각적 강조에 맞게 subdued, base, strong 중에서 선택하세요.
borderRadius	MaybeAllValuesShorthandProperty<BoxBorderRadii>	디자인 시스템의 반경 스케일을 사용한 요소 모서리의 둥근 정도입니다. 모서리마다 다른 반경을 지정할 수 있도록 1~4개 값 구문을 지원합니다. 둥근 모서리나 완전히 둥근 요소를 만들 때 사용합니다.
borderStyle	"" | MaybeAllValuesShorthandProperty<BoxBorderStyles>	실선, 파선, 점선 등 모든 면의 테두리 시각적 스타일입니다. 설정하면 border 속성에 지정된 스타일 값을 재정의합니다. 면마다 다른 스타일을 지정할 수 있도록 1~4개 값 구문을 지원합니다.
borderWidth	"" | MaybeAllValuesShorthandProperty<"base" | "small-100" | "small" | "large" | "large-100" | "none">	모든 면의 테두리 두께입니다. 설정하면 border 속성에 지정된 너비 값을 재정의합니다. 면마다 다른 너비를 지정할 수 있도록 1~4개 값 구문을 지원합니다.
display	"auto" | "none"	컴포넌트의 외부 display 유형입니다. 외부 유형은 컴포넌트가 플로우 레이아웃에 참여하는 방식을 설정합니다. - auto 컴포넌트의 초기값입니다. 실제 값은 컴포넌트와 컨텍스트에 따라 달라집니다. - none 컴포넌트를 화면에서 숨기고 접근성 트리에서 제거하여 스크린 리더에서도 보이지 않게 합니다.
inlineSize	"auto" | "0"	가로 쓰기 모드에서는 너비, 세로 쓰기 모드에서는 높이입니다. 텍스트 방향에 맞춰 조정되는 흐름 상대 크기 지정에 사용합니다. inline-size에 대해 자세히 알아보세요.
maxBlockSize	"none" | "0"	가로 쓰기 모드에서는 최대 높이, 세로 쓰기 모드에서는 최대 너비입니다. 요소가 이 크기를 넘어 커지지 않도록 합니다. max-block-size에 대해 자세히 알아보세요.
maxInlineSize	"none" | "0"	가로 쓰기 모드에서는 최대 너비, 세로 쓰기 모드에서는 최대 높이입니다. 요소가 이 크기를 넘어 커지지 않도록 합니다. max-inline-size에 대해 자세히 알아보세요.
minBlockSize	"0"	가로 쓰기 모드에서는 최소 높이, 세로 쓰기 모드에서는 최소 너비입니다. 요소가 이 크기보다 작아지지 않도록 합니다. min-block-size에 대해 자세히 알아보세요.
minInlineSize	"0"	가로 쓰기 모드에서는 최소 너비, 세로 쓰기 모드에서는 최소 높이입니다. 요소가 이 크기보다 작아지지 않도록 합니다. min-inline-size에 대해 자세히 알아보세요.
overflow	"auto" | "hidden" | "auto auto" | "auto hidden" | "hidden auto" | "hidden hidden"	요소의 오버플로 동작을 설정합니다.
padding	MaybeResponsive<MaybeAllValuesShorthandProperty<PaddingKeyword>>	컴포넌트의 모든 가장자리에 적용되는 패딩입니다. 흐름 상대 값을 사용하는 1~4개 값 구문을 지원합니다: - 값 1개는 모든 면에 적용 - 값 2개는 block(위/아래)과 inline(왼쪽/오른쪽)에 적용 - 값 3개는 block-start(위), inline(왼쪽/오른쪽), block-end(아래)에 적용 - 값 4개는 block-start(위), inline-end(오른쪽), block-end(아래), inline-start(왼쪽)에 적용 Examples:* base, large none, base large-100 base small 패딩이 제거된 가장 가까운 컨테이너에서 패딩을 상속하려면 auto를 사용합니다. 지원되는 PaddingKeyword를 쿼리 값으로 사용하는 반응형 값 문자열도 허용합니다.
paddingBlock	MaybeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>>	블록 방향 패딩입니다(가로 쓰기 모드에서는 위쪽과 아래쪽). 양쪽에 적용할 값 하나 또는 block-start와 block-end에 적용할 공백으로 구분된 값 두 개를 받습니다. 예시:* large none은 위쪽에 large, 아래쪽에 none을 적용합니다. padding의 블록 값보다 우선합니다. 지원되는 PaddingKeyword를 쿼리 값으로 사용하는 반응형 값 문자열도 받습니다.
paddingBlockEnd	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	block-end 패딩입니다(가로 쓰기 모드에서는 아래쪽). paddingBlock의 block-end 값보다 우선합니다. 지원되는 PaddingKeyword를 쿼리 값으로 사용하는 반응형 값 문자열도 받습니다.
paddingBlockStart	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	block-start 패딩입니다(가로 쓰기 모드에서는 위쪽). paddingBlock의 block-start 값보다 우선합니다. 지원되는 PaddingKeyword를 쿼리 값으로 사용하는 반응형 값 문자열도 받습니다.
paddingInline	MaybeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>>	인라인 방향 패딩(가로 쓰기 모드에서는 왼쪽과 오른쪽)입니다. 양쪽에 적용할 단일 값 또는 inline-start와 inline-end에 대한 공백으로 구분된 두 값을 허용합니다. Example:* large none은 왼쪽에 large, 오른쪽에 none을 적용합니다. padding의 인라인 값을 재정의합니다. 지원되는 PaddingKeyword를 쿼리 값으로 사용하는 반응형 값 문자열도 허용합니다.
paddingInlineEnd	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	inline-end 패딩(LTR 쓰기 모드에서는 오른쪽, RTL에서는 왼쪽)입니다. paddingInline의 inline-end 값을 재정의합니다. 지원되는 PaddingKeyword를 쿼리 값으로 사용하는 반응형 값 문자열도 허용합니다.
paddingInlineStart	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	inline-start 패딩(LTR 쓰기 모드에서는 왼쪽, RTL에서는 오른쪽)입니다. paddingInline의 inline-start 값을 재정의합니다. 지원되는 PaddingKeyword를 쿼리 값으로 사용하는 반응형 값 문자열도 허용합니다.
scrollMargin	"0" | "0 0" | "0 0 0" | "0 0 0 0"	요소의 스크롤 마진입니다(CSS와 유사한 1~4개 값의 단축 구문).
scrollPadding	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	스크롤 스냅 정렬 지점의 오프셋입니다.
snapType	"none" | "mandatory" | "proximity"	스크롤 스냅 동작을 제어합니다.

위의 일부 타입 열은 읽기 쉽도록 축약되었습니다. 전체 union은 라이브러리에서 생성된 TypeScript 타입(src/lib/generated/types.ts)에 있습니다.

Events

Event	타입
scroll	CustomEvent
scrolltoedge	CustomEvent

<SScrollBox>에서 @scroll 형식의 리스너로 이 events를 수신하세요.

Slots

Slot	설명
default	ScrollBox의 콘텐츠입니다.