Stack

v1.1.0

수직 또는 수평 배치를 위한 Flexbox 기반 스택 레이아웃 컴포넌트입니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { Stack } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

아이템 1

아이템 2

아이템 3

아이템 1

아이템 2

아이템 3

spacing="sm"

spacing="md"

spacing="lg"

spacing="xl"

justify="between"

justify="center" align="center"

React

Vue

Angular

Svelte

Solid

Next.js

Nuxt

Remix

이름	타입	기본값	설명
`direction`	`"vertical" \| "horizontal"`	`"vertical"`	스택 방향 (수평 또는 수직)
`spacing`	`"none" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	아이템 간 간격
`align`	`"start" \| "center" \| "end" \| "stretch"`	`"start"`	교차축 정렬
`justify`	`"start" \| "center" \| "end" \| "between" \| "around" \| "evenly"`	`"start"`	주축 정렬
`wrap`	`boolean`	`false`	아이템 줄바꿈 허용

기본 사용법tsx

import { Stack } from '@hua-labs/ui';

<Stack spacing="md">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Stack>

수평tsx

<Stack direction="horizontal" spacing="lg" align="center" justify="between">
  <Button>Left</Button>
  <Button>Right</Button>
</Stack>

줄바꿈tsx

<Stack direction="horizontal" wrap spacing="sm">
  {tags.map(tag => <Badge key={tag}>{tag}</Badge>)}
</Stack>

•시맨틱 구조: flexbox로 시각적 레이아웃을 구성하되, 스크린 리더를 위해 DOM의 논리적 순서를 그대로 유지하는 시맨틱 컨테이너로 렌더링됩니다.
•콘텐츠 순서: 시각적 스택 방향은 DOM 읽기 순서에 영향을 주지 않아, 보조 기술이 콘텐츠를 논리적으로 읽을 수 있습니다.
•키보드 탐색: 스택 내부의 인터랙티브 자식 요소는 문서 흐름에 맞는 자연스러운 탭 순서를 따릅니다.