SGridItem <s-grid-item>

여러 열이나 행에 걸칠 수 있는 grid의 자식 요소입니다. SGridItem은(는) Shopify Polaris <s-grid-item> web component를 위한 타입이 지정된 Vue 3 wrapper입니다.

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

예시

Column 1Column 2Column 1Column 2

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

<template>
  <!-- Each SGridItem is one cell placed into the parent SGrid's tracks. -->
  <SGrid gridTemplateColumns="1fr 1fr" gap="base">
    <SGridItem>
      <SBox background="subdued" padding="base" borderRadius="200">
        <SText>Column 1</SText>
      </SBox>
    </SGridItem>
    <SGridItem>
      <SBox background="subdued" padding="base" borderRadius="200">
        <SText>Column 2</SText>
      </SBox>
    </SGridItem>
    <SGridItem>
      <SBox background="strong" padding="base" borderRadius="200">
        <SText>Column 1</SText>
      </SBox>
    </SGridItem>
    <SGridItem>
      <SBox background="strong" padding="base" borderRadius="200">
        <SText>Column 2</SText>
      </SBox>
    </SGridItem>
  </SGrid>
</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 컴포넌트를 화면에서 숨기고 접근성 트리에서 제거하여 스크린 리더에서도 보이지 않게 합니다.
gridColumn	"auto"	아이템이 걸칠 열의 개수입니다. grid-column 속성에 대해 자세히 알아보세요.
gridRow	"auto"	아이템이 걸칠 행의 개수입니다. grid-row 속성에 대해 자세히 알아보세요.
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	그리드 아이템 컴포넌트 안에 표시되는 콘텐츠입니다. 그리드 레이아웃의 단일 셀을 나타내며 여러 열이나 행에 걸칠 수 있습니다.