SBox `<s-box>`

패딩, 배경, 테두리, 모서리 둥글기, 크기를 지정하는 범용 컨테이너입니다. SBox은(는) Shopify Polaris <s-box> web component를 위한 타입이 지정된 Vue 3 wrapper입니다.

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

모범 사례

범용 컨테이너로 사용하세요. SBox는 콘텐츠를 묶기 위한 여백, 테두리, 배경을 처리합니다. 행이나 열 같은 특정 배치가 필요하다면 대신 SStack이나 SGrid를 사용합니다.
더 의미 있는 컴포넌트가 있는지 먼저 확인하세요. SSection이나 SBanner처럼 콘텐츠의 성격을 이미 표현하는 컴포넌트가 있다면 그쪽을 우선합니다. 목적에 맞게 만들어진 컴포넌트는 의도가 더 분명하고 접근성도 더 좋습니다.
작은 화면을 고려하세요. 데스크톱에서 잘 보이는 레이아웃도 모바일에서는 깨질 수 있으므로, 고정 크기에 의존하지 말고 반응형 값으로 여백과 레이아웃을 조정합니다.
영역과 인터랙티브 콘텐츠를 설명하세요. 박스가 구분된 영역을 나타내거나 인터랙티브 콘텐츠를 담고 있다면 accessibilityRole과 accessibilityLabel을 설정해, 스크린 리더 사용자가 구조를 이해하고 탐색할 수 있게 합니다.
중첩을 얕게 유지하세요. 박스 안에 박스를 계속 쌓으면 마크업이 복잡해지고 스타일을 유지하기 어려워집니다. 더 단순한 구조나 더 적합한 레이아웃 컴포넌트를 찾아보세요.

vue

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

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

예시

background="subdued"

background="strong"

bordered box

vue

<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	타입	설명
`accessibilityLabel`	`string`	요소의 목적이나 내용을 설명하는 레이블입니다. 설정하면 보조 기술을 사용하는 사용자에게 읽혀 더 많은 맥락을 제공합니다. 요소의 콘텐츠만으로는 보조 기술 사용자에게 맥락이 충분하지 않을 때만 사용하세요.
`accessibilityRole`	`"generic" \| "status" \| "main" \| "header" \| "footer" \| "section" \| "region" \| "aside" … (9 more)`	컴포넌트 콘텐츠의 의미(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`	`"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`를 쿼리 값으로 사용하는 반응형 값 문자열도 허용합니다.

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

Slots

Slot	설명
`default`	박스 컴포넌트 안에 표시되는 콘텐츠로, 다른 컴포넌트를 구성하고 스타일을 지정하는 유연한 컨테이너 역할을 합니다.

SBox <s-box> ​

모범 사례 ​

예시 ​

Props ​

Slots ​

SBox `<s-box>`

모범 사례

예시

Props

Slots