SStack `<s-stack>`

자식 요소를 일관된 간격과 정렬로 가로 또는 세로로 배치합니다. SStack은(는) Shopify Polaris <s-stack> web component를 위한 타입이 지정된 Vue 3 wrapper입니다.

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

모범 사례

간격이 관계를 반영하게 하세요. 작은 gap은 항목들이 함께 속한다는 신호이고, 큰 간격은 서로 다른 그룹을 구분합니다. 콘텐츠 위계에 맞는 간격을 고릅니다.
인라인 스택은 줄바꿈된다는 점을 염두에 두세요. direction="inline"에서는 공간이 부족하면 항목이 다음 줄로 넘어갑니다. 대개 원하는 동작이지만, 줄바꿈이나 여러 행을 정확히 제어해야 한다면 다른 레이아웃 방식을 사용합니다.
정렬을 의도적으로 설정하세요. 기본 정렬은 대부분의 레이아웃에 적합합니다. 항목 크기가 다르거나 특정 위치가 필요할 때 alignItems나 justifyContent를 조정합니다.

vue

<SStack direction="inline" gap="small-200" alignItems="center">
  <SBadge>Draft</SBadge>
  <SText>Last edited today</SText>
</SStack>

전체 가이드는 <s-stack>에 대한 Shopify 모범 사례(영어)를 참고하세요.

예시

Item 1

Item 2

Item 3

vue

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

<template>
  <SStack direction="inline" gap="large" alignItems="center">
    <SBox background="subdued" padding="base" borderRadius="200">
      <SText>Item 1</SText>
    </SBox>
    <SBox background="subdued" padding="base" borderRadius="200">
      <SText>Item 2</SText>
    </SBox>
    <SBox background="subdued" padding="base" borderRadius="200">
      <SText>Item 3</SText>
    </SBox>
  </SStack>
</template>

Props

Prop	타입	설명
`accessibilityLabel`	`string`	요소의 목적이나 내용을 설명하는 레이블입니다. 설정하면 보조 기술을 사용하는 사용자에게 읽혀 더 많은 맥락을 제공합니다. 요소의 콘텐츠만으로는 보조 기술 사용자에게 맥락이 충분하지 않을 때만 사용하세요.
`accessibilityRole`	`"generic" \| "status" \| "main" \| "header" \| "footer" \| "section" \| "region" \| "aside" … (9 more)`	컴포넌트 콘텐츠의 의미(semantic)를 설정합니다. 설정하면 보조 기술이 이 역할을 사용해 사용자가 페이지를 탐색하도록 돕습니다.
`accessibilityVisibility`	`"visible" \| "hidden" \| "exclusive"`	요소의 표시 여부를 변경합니다. - `visible`: 요소가 모든 사용자에게 표시됩니다. - `hidden`: 요소가 접근성 트리에서 제거되지만 화면에는 표시됩니다. - `exclusive`: 요소가 시각적으로는 숨겨지지만 접근성 트리에는 남아 있습니다.
`alignContent`	`"normal" \| "stretch" \| "baseline" \| "first baseline" \| "last baseline" \| "center" \| "start" \| "end" … (9 more)`	콘텐츠가 여러 줄로 줄바꿈될 때 블록 축 방향으로 줄의 분배를 제어합니다. 이 속성은 줄바꿈되는 콘텐츠가 있는 스택에만 영향을 줍니다. 한 줄짜리 스택에는 `alignItems`를 사용하세요.
`alignItems`	`"normal" \| "stretch" \| "baseline" \| "first baseline" \| "last baseline" \| "center" \| "start" \| "end" … (6 more)`	블록 축(가로 쓰기 모드에서는 세로) 방향으로 자식 요소의 정렬을 제어합니다. 스택 방향에 수직으로 항목을 정렬할 때 사용합니다. 인라인 스택에서는 세로, 블록 스택에서는 가로 방향입니다.
`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개 값 구문을 지원합니다.
`columnGap`	`"base" \| "small-200" \| "small-100" \| "small" \| "large" \| "large-100" \| "small-500" \| "small-400" … (6 more)`	인라인 축 방향의 요소 간 간격을 조정합니다. `gap`의 열(column) 값보다 우선합니다. 허용되는 값: - `large-100` 같은 단일 `SpacingKeyword` 값 - 지원되는 SpacingKeyword를 쿼리 값으로 사용하는 반응형 값 문자열
`direction`	`"block" \| "inline"`	스택의 자식 요소가 스택 안에서 배치되는 방향입니다. 허용 값: - `inline` 또는 `block` 중 하나의 단일 값 - 지원되는 방향 값을 쿼리 값으로 사용하는 반응형 값 문자열
`display`	`"auto" \| "none"`	컴포넌트의 외부 display 유형입니다. 외부 유형은 컴포넌트가 플로우 레이아웃에 참여하는 방식을 설정합니다. - `auto` 컴포넌트의 초기값입니다. 실제 값은 컴포넌트와 컨텍스트에 따라 달라집니다. - `none` 컴포넌트를 화면에서 숨기고 접근성 트리에서 제거하여 스크린 리더에서도 보이지 않게 합니다.
`gap`	`MaybeResponsive<MaybeTwoValuesShorthandProperty<SpacingKeyword>>`	요소 간 간격을 조정합니다. 허용되는 값: - 두 축 모두에 적용되는 `large-100` 같은 단일 `SpacingKeyword` 값 - 인라인 축과 블록 축을 각각 설정하는 `large-100 large-500` 같은 값 쌍 - 지원되는 SpacingKeyword를 쿼리 값으로 사용하는 반응형 값 문자열
`inlineSize`	`"auto" \| "0"`	가로 쓰기 모드에서는 너비, 세로 쓰기 모드에서는 높이입니다. 텍스트 방향에 맞춰 조정되는 흐름 상대 크기 지정에 사용합니다. inline-size에 대해 자세히 알아보세요.
`justifyContent`	`"normal" \| "stretch" \| "center" \| "start" \| "end" \| "unsafe center" \| "unsafe start" \| "unsafe end" … (6 more)`	인라인 축(가로 쓰기 모드에서는 가로) 방향으로 자식 요소의 분배를 제어합니다. 스택의 주축을 따라 항목을 배치할 때 사용합니다. 인라인 스택에서는 가로, 여러 줄로 줄바꿈된 블록 스택에서는 세로 방향입니다.
`maxBlockSize`	`"none" \| "0"`	가로 쓰기 모드에서는 최대 높이, 세로 쓰기 모드에서는 최대 너비입니다. 요소가 이 크기를 넘어 커지지 않도록 합니다. max-block-size에 대해 자세히 알아보세요.
`maxInlineSize`	`"none" \| "0"`	가로 쓰기 모드에서는 최대 너비, 세로 쓰기 모드에서는 최대 높이입니다. 요소가 이 크기를 넘어 커지지 않도록 합니다. max-inline-size에 대해 자세히 알아보세요.
`minBlockSize`	`"0"`	가로 쓰기 모드에서는 최소 높이, 세로 쓰기 모드에서는 최소 너비입니다. 요소가 이 크기보다 작아지지 않도록 합니다. min-block-size에 대해 자세히 알아보세요.
`minInlineSize`	`"0"`	가로 쓰기 모드에서는 최소 너비, 세로 쓰기 모드에서는 최소 높이입니다. 요소가 이 크기보다 작아지지 않도록 합니다. min-inline-size에 대해 자세히 알아보세요.
`overflow`	`"visible" \| "hidden"`	요소의 오버플로 동작을 설정합니다. - `hidden`: 콘텐츠가 요소의 컨테이너보다 클 때 잘라냅니다. 요소는 스크롤되지 않으며, 사용자는 드래그하거나 마우스 스크롤 휠을 사용해 잘린 콘텐츠에 접근할 수 없습니다. - `visible`: 요소의 컨테이너를 벗어나는 콘텐츠도 표시됩니다.
`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`를 쿼리 값으로 사용하는 반응형 값 문자열도 허용합니다.
`rowGap`	`"base" \| "small-200" \| "small-100" \| "small" \| "large" \| "large-100" \| "small-500" \| "small-400" … (6 more)`	블록 축 방향의 요소 간 간격을 조정합니다. `gap`의 행(row) 값보다 우선합니다. 허용되는 값: - `large-100` 같은 단일 `SpacingKeyword` 값 - 지원되는 SpacingKeyword를 쿼리 값으로 사용하는 반응형 값 문자열

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

Slots

Slot	설명
`default`	스택 컴포넌트 안에 표시되는 자식 요소로, 일정한 간격으로 세로 또는 가로로 배치됩니다.

SStack <s-stack> ​

모범 사례 ​

예시 ​

Props ​

Slots ​

SStack `<s-stack>`

모범 사례

예시

Props

Slots