Stack

Stack (스택)

자식 요소를 세로나 가로로 배치하는 레이아웃 컴포넌트예요. 여러 요소를 일정한 간격으로 쌓을 때 가장 많이 쓰여요.

출처: 문서

본문

Stack은 기본적으로 자식 요소에 flex-direction: column과 gap: 8px을 적용해요. <ExampleTabs name="stack-basic" />

사용법 (Usage)

import { HStack, Stack, VStack } from "@chakra-ui/react"

<Stack>
  <div />
  <div />
</Stack>

예시 (Examples)

가로 (Horizontal)

direction prop으로 스택의 방향을 바꿀 수 있어요.

HStack

또는 HStack을 사용해 가로 스택을 만들고 자식 요소를 가로로 정렬할 수 있어요.

VStack

VStack을 사용해 세로 스택을 만들고 자식 요소를 세로로 정렬할 수 있어요.

시퍼레이터 (Separator)

separator prop으로 스택 아이템 사이에 시퍼레이터를 추가할 수 있어요.

반응형 방향 (Responsive Direction)

direction prop으로 스택의 방향을 반응형으로 바꿀 수 있어요.