guridaek-layout-components v1.1.2

guridaek-layout-components

간단한 레이아웃 컴포넌트입니다.

Storybook

설치 방법

npm install guridaek-layout-components

사용 방법

Components 불러오기

import { Container, Flex, Grid } from "guridaek-layout-components";

Container 사용하기

<Container minWidth="100px" maxWidth="300px" etc="background-color: white; border: 1px solid blue">
  ...
</Container>

• minWidth: CSSProperties"minWidth"

  최소 너비를 설정할 수 있습니다.

• maxWidth: CSSProperties"maxWidth"

  최대 너비를 설정할 수 있습니다.

• etc: CSSProp

  추가적인 CSS를 적용할 수 있습니다.

Flex 사용하기

<Flex
  direction="column"
  alignItems="center"
  gap="10px"
  etc="background-color: white; border: 1px solid blue"
>
  ...
</Flex>

• direction: CSSProperties"flexDirection"

  배치 축을 설정할 수 있습니다.

• flexWrap: CSSProperties"flexWrap"

  줄 넘김 설정을 할 수 있습니다.

• justifyContent: CSSProperties"justifyContent"

  메인 축 정렬 방향을 설정할 수 있습니다.

• alignItems: CSSProperties"alignItems"

  수직 축 정렬 방향을 설정할 수 있습니다.

• gap: CSSProperties"gap"

  자식 요소간의 간격을 설정할 수 있습니다.

• etc: CSSProp

  추가적인 CSS를 적용할 수 있습니다.

Grid 사용하기

<Grid rows={4} columns={4} gap="10px" etc="background-color: white; border: 1px solid blue">
  ...
</Grid>

• rows: number

  행의 수를 설정할 수 있습니다.

• rows: number

  열의 수를 설정할 수 있습니다.

• gap: CSSProperties"gap"

  자식 요소간의 간격을 설정할 수 있습니다.

• etc: CSSProp

  추가적인 CSS를 적용할 수 있습니다.

Drawer 사용하기

<Drawer anchor="TOP" isOpen={isOpen} onClose={handleClose}>
  ...
</Drawer>

• anchor: "TOP" | "BOTTOM" | "LEFT" | "RIGHT"

  Drawer의 위치를 설정할 수 있습니다.

• isOpen: boolean

  화면에 표시된 상태인지 나타냅니다.

• onClose: () => void

  Drawer를 닫는 함수입니다. isOpen을 false로 바꿔줘야 합니다.

• etc: CSSProp

  추가적인 CSS를 적용할 수 있습니다.