tami-layout-component v1.1.0

Install

npm install tami-layout-component
yarn add tami-layout-component

Container

화면의 폭에 따라 내용의 폭을 조절하고 레이아웃을 배치하는 컴포넌트입니다.

import { Container } from 'tami-layout-component';

Props

Example

<Container maxWidth='600px' backgroundColor='#CCCCCC' centerContent>
  <div>Container</div>
</Container>

Flex

Flex 레이아웃(1차원 정렬)을 생성하기 위한 컴포넌트입니다.

import { Flex } from 'tami-layout-component';

Props

Example

<Flex direction='column' gap={12} width='300px'>
  <div>Item1</div>
  <div>Item2</div>
</Flex>

Grid

Grid 레이아웃 (2차원 정렬)을 생성하기 위한 컴포넌트입니다.

import { Grid } from 'tami-layout-component';

Props

Example

<Grid columns={4} gap={12}>
  <GridItem backgroundColor='#FFEC99'>Item 1</GridItem>
  <GridItem backgroundColor='#FFEC99'>Item 2</GridItem>
  <GridItem backgroundColor='#FFEC99'>Item 3</GridItem>
  <GridItem backgroundColor='#FFEC99'>Item 4</GridItem>
</Grid>

Grid Item

Grid의 자식 컴포넌트입니다.

import { GridItem } from 'tami-layout-component';

Props

Example

<GridItem col={2} backgroundColor='#D8EAFF' />

Drawer

화면의 한 쪽에서 열고 닫을 수 있는 컴포넌트입니다.

import { Drawer } from 'tami-layout-component';

Props

Example

const [isOpen, setIsOpen] = useState(false);
const handleDrawerClose = () => {
  setIsOpen(!isOpen);
};

return (
  <>
    <Drawer isOpen={isOpen} handleDrawerClose={handleDrawerClose}>
      <div>children</div>
    </Drawer>
  </>
);