Divider

Maeng Design의 Divider 컴포넌트는 서로 다른 컴포넌트를 구분하기 위해 사용됩니다.

Type

horizontal, vertical 2가지의 type이 존재합니다.

안녕하세요. Maeng Design 개발자 Maeng입니다.

앞으로 많은 사용 부탁드립니다. 😘

Maeng

Design

Link

import React from 'react';
import { Typography, Divider } from 'maeng-design';

const { Paragraph, Text } = Typography;

const App = () => (
  <>
    <div className="example1">
      <Paragraph className="example">
        안녕하세요. Maeng Design 개발자 김명성입니다. 만나서 반갑습니다. 앞으로 많은 사용
        부탁드립니다.
      </Paragraph>
      <Divider />
      <Paragraph className="example">
        안녕하세요. Maeng Design 개발자 김명성입니다. 만나서 반갑습니다. 앞으로 많은 사용
        부탁드립니다.
      </Paragraph>
    </div>
    <div className="example2">
        <Text>Maeng</Text>
        <Divider type="vertical" />
        <Text>Design</Text>
        <Divider type="vertical" />
        <Text>Link</Text>
    </div>
  </>
);

Position

구분선 내의 컨텐츠의 위치를 지정할 수 있습니다.

Left Divider

Center Divider

Right Divider

import React from 'react';
import { Divider } from 'maeng-design';

const App = () => (
  <div>
    <Divider position="left">Left Divider</Divider>
    <Divider position="center">Center Divider</Divider>
    <Divider position="right">Right Divider</Divider>
  </div>
);

Dashed

구분선을 점선 스타일로 나타낼 수 있습니다.

import React from 'react';
import { Divider } from 'maeng-design';

const App = () => (
  <div>
    <Divider dashed />
  </div>
);

API

Property	Description	Type	default
type	구분선의 타입을 수평선 혹은 수직선으로 설정할 수 있습니다.	horizontal vertical	horizontal
position	구분선 안의 컨텐츠의 위치를 지정할 수 있습니다.	left center right	center
dashed	구분선을 점선 스타일로 나타낼 수 있습니다.	boolean	false