Skip to content

Latest commit

 

History

History
65 lines (49 loc) · 2.06 KB

README.md

File metadata and controls

65 lines (49 loc) · 2.06 KB
Raw

Stack Layout Component

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

사용 전 주의사항

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

  • 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>