Stack
수직/수평 스택 레이아웃 컴포넌트입니다.
개요
Stack은 요소들을 수직 또는 수평으로 정렬하는 레이아웃 컴포넌트입니다. Flexbox를 기반으로 간격과 정렬을 쉽게 조절할 수 있습니다.
주요 특징:
- 수직/수평 방향
- Spacing 옵션
- Alignment 옵션
- Wrap 옵션
사용 사례:
- 버튼 그룹
- 폼 레이아웃
- 리스트 아이템
- 네비게이션 메뉴
알림: 이 컴포넌트는 현재 구현 중입니다. 임시로 Tailwind CSS Flex를 사용할 수 있습니다.
기본 사용법
<div className="flex flex-col gap-md">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>Variants (변형)
수직 스택 (기본)
<div className="flex flex-col gap-md">
<Button>버튼 1</Button>
<Button>버튼 2</Button>
<Button>버튼 3</Button>
</div>수평 스택
<div className="flex flex-row gap-md">
<Button>버튼 1</Button>
<Button>버튼 2</Button>
<Button>버튼 3</Button>
</div>예제
예제 1: 폼 레이아웃
export default function FormLayout() {
return (
<div className="flex flex-col gap-md">
<Input placeholder="이름" />
<Input placeholder="이메일" />
<Input placeholder="전화번호" />
<div className="flex gap-md">
<Button variant="outline">취소</Button>
<Button>제출</Button>
</div>
</div>
);
}관련 컴포넌트
Last updated on