@jdesignlab/stack
TypeScript icon, indicating that this package has built-in type declarations

0.7.1 • Public • Published

Stack

Stack 컴포넌트는 요소들을 공통으로 그룹화하고, 요소 사이에 수평&수직 레이아웃을 간편하게 배치시킬 수 있는 레이아웃입니다.

Usage

Storybook

<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

Readme

Keywords

none

Package Sidebar

Install

npm i @jdesignlab/stack

Weekly Downloads

1

Version

0.7.1

License

none

Unpacked Size

34.9 kB

Total Files

29

Last publish

Collaborators

  • sjchoi
  • yoycode
  • j-design-system