@jdesignlab/stack
v0.7.1
Published
Stack 컴포넌트는 요소들을 공통으로 그룹화하고, 요소 사이에 수평&수직 레이아웃을 간편하게 배치시킬 수 있는 레이아웃입니다.
Downloads
4
Readme
Stack
Stack 컴포넌트는 요소들을 공통으로 그룹화하고, 요소 사이에 수평&수직 레이아웃을 간편하게 배치시킬 수 있는 레이아웃입니다.
Usage
<Stack direction="vertical" justify="stretch" spacing="20px">
<div style={{ height: '64px', width: '64px', backgroundColor: '#ff4d4d' }}>first</div>
<div style={{ height: '64px', width: '64px', backgroundColor: '#3ae374' }}>second</div>
<div style={{ height: '64px', width: '64px', backgroundColor: '#18dcff' }}>third</div>
<div style={{ height: '64px', width: '64px', backgroundColor: '#7d5fff' }}>fourth</div>
</Stack>Props
Stack
| Property | Allow Types | Description | Default |
| ---------- | --------------------------------------------------- | ------------------------------------------------ | ------------- |
| children | React.ReactNode | Stack의 자식 요소입니다. | |
| as | React.ElementType | 별도의 ElementType을 지정합니다. | div |
| spacing | xs sm md lg xl | 요소 사이의 간격을 지정합니다. | transparent |
| align | start end center between around stretch | align 속성을 지정합니다. | start |
| justify | start end center between around stretch | justify-content 속성을 지정합니다. | start |
| direction | vertical horizontal | 레이아웃의 방향을 지정합니다. | horizontal |
| wrap | boolean | nowrap 여부를 지정합니다. | false |
| responsive | boolean | 디바이스 UI에 맞춰 반응형으로 방향을 결정합니다. | false |