Stack, VStack, HStack
요소들을 수직 또는 수평으로 정렬하고 간격을 관리하는 레이아웃 컴포넌트입니다.
개요
첫 번째 아이템
두 번째 아이템
세 번째 아이템
설치
사용법
Stack은 기본 수직 레이아웃, VStack은 항상 수직, HStack은 항상 수평 방향입니다.
- Stack: 기본 수직 레이아웃 (direction="row"로 수평 변경 가능)
- VStack: 항상 수직 방향
- HStack: 항상 수평 방향 (기본 align="center")
예제
VStack - 수직 레이아웃
요소를 수직으로 쌓아 올립니다.
첫 번째
두 번째
세 번째
HStack - 수평 레이아웃
요소를 수평으로 나란히 배치합니다.
왼쪽
중앙
오른쪽
Gap
gap prop으로 요소 간 간격을 조절합니다. xs(4px)부터 4xl(64px)까지 지원합니다.
sm (8px)
Item 1
Item 2
lg (24px)
Item 1
Item 2
Align & Justify
align과 justify로 요소를 정렬합니다.
VStack - Center Align
중앙 정렬
아이템
HStack - Space Between
왼쪽
오른쪽
실제 사용 예시
폼 레이아웃과 버튼 그룹 예시입니다.