Stack

Stack은 spacing 토큰 gap으로 자식을 행 또는 열로 배치합니다. 기본 방향은 column입니다.

One

Two

Three

계약

Overview

Machine-readable contract from Component Spec.

component: stackexport: Stackversion: 1attributes: data-refineui=stack

Anatomy

Part	data-refineui
root	stack

Layout

Property	Value
direction	logical
rtl	true

설치

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

사용법

import { Button, Stack } from "@refineui/react";

<Stack gap="sizeMedium">
  <div>Item 1</div>
  <div>Item 2</div>
</Stack>

<Stack direction="row" gap="sizeSmall" align="center" justify="between">
  <Button type="button" variant="outline">Cancel</Button>
  <Button type="button" variant="primary">Save</Button>
</Stack>

API 레퍼런스

Prop	Default	Type	Description
as	"div"	ElementType	루트 요소.
direction	"column"	"row" | "column" | "row-reverse" | "column-reverse"	Flex 방향.
gap	"sizeNone"	Spacing token	자식 사이 gap.
align	—	"start" | "center" | "end" | "stretch" | "baseline"	교차축 정렬.
justify	—	"start" | "center" | "end" | "between" | "around" | "evenly"	주축 justify.
wrap	—	boolean | wrap token	줄바꿈 동작.
inline	false	boolean	`inline-flex`를 사용합니다.