Stack Layout Component

리액트와 스타일드 컴포넌트를 이용해서 구현한 스택 형태의 레이아웃 컴포넌트.

• npm
• demo: storybook

사용 전 주의사항

프로젝트에 다음 세 가지가 설치되어 있어야 해요.

• react
• react-dom
• styled-components

설치

npm install @pium/stack-component

컴포넌트 설명

기능

Stack은 주어진 자식 요소들을 세로로 정렬한 후, 원하는 만큼의 개수만 보여줍니다.

주의사항

• Stack은 자식 요소에 애니메이션을 삽입하므로 겹치지 않게 주의해주세요!
• JSX 상에서 Stack의 직속 자녀들만을 대상으로 합니다.

Props

이름	설명	가능한 값	기본값
showCount*	보여줄 요소의 개수.	number	-
as	Stack에 적용할 semantic tag	"div", "ul", "ol", "main", "section", "article"	"div"
flow	normal: JSX에 나타난 순서대로 DOM에 표시됩니다. 새로운 요소는 아래에서 위로 올라옵니다. reverse: JSX에 나타난 순서의 반대로 DOM에 표시됩니다. 새로운 요소는 위에서 아래로 떨어집니다.	"normal", "reverse"	"reverse"
time	새로운 요소가 생길 때 나타나는 애니메이션 시간(밀리초).	number	400
justifyItems	CSS의 justify-items	React.CSSProperties['justifyItems']	"normal"
rowGap	CSS의 row-gap	React.CSSProperties['rowGap']	0

예제

import { Stack } from '@pium/stack-component';

<Stack
  as="main"
  showCount={2}
  flow="normal"
  rowGap="2rem"
  time={777}
  justifyItems="center"
>
  <p>새는 자기 길을 안다</p>
  <p>김종해</p>
  <p>하늘에 길이 있다는 것을</p>
  <p>새들이 먼저 안다</p>
  <p>하늘에 길을 내며 날던 새는</p>
  <p>길을 또 지운다</p>
  <p>새들이 하늘 높이 길을 내지 않는 것은</p>
  <p>그 위에 별들이 가는 길이 있기 때문이다</p>
</Stack>