Maeng Design

Modal

Maeng Design의 Modal 컴포넌트는 새 페이지로 건너뛰거나 사용자의 작업 흐름을 방해하지 않는 대화 상자를 표시해야 하는 경우 사용합니다.
import React, { useState } from 'react';
import { Modal } from 'maeng-design';

const App = () => {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <Button onClick={() => setOpen(true)}>클릭!</Button>
        <Modal
          title="Modal Title"
          visible={open}
          onConfirm={() => setOpen(false)}
          onCancel={() => setOpen(false)}
          onClose={() => setOpen(false)}
          onClickBackground={() => setOpen(false)}
        >
        <div>Hello! 🎨 Maeng Design</div>
        </Modal>
    </div>
  );
};

API

Modal 속성을 설정하여 다양한 Modal을 생성하고 컨트롤 할 수 있습니다.
PropertyDescriptionTypedefault
width모달 창의 너비를 지정할 수 있습니다.String | Number400px
visible모달 창이 오픈되는지 여부를 설정합니다.ColorName-
title모달 창 헤더의 타이틀 내용을 지정합니다.ReactNode-
closeIcon모달 창 헤더 우측에 닫기 아이콘을 지정합니다.ReactNode<CloseOutlined />
confirmOptions모달 창 푸더의 "확인" 버튼의 옵션을 설정할 수 있습니다.{ label: ReactNode } & Omit<ButtonProps, "onClick">{ label: "OK", type: "primary" }
cancelOptions모달 창 푸더의 "취소" 버튼의 옵션을 설정할 수 있습니다.{ label: ReactNode } & Omit<ButtonProps, "onClick">{ label: "Cancel" }
onClickBackgroundBackground의 click 이벤트를 처리하는 핸들러 설정(event) => void-
onConfirm확인 버튼의 click 이벤트를 처리하는 핸들러 설정(event) => void-
onCancel취소 버튼의 click 이벤트를 처리하는 핸들러 설정(event) => void-
onClose닫기 버튼의 click 이벤트를 처리하는 핸들러 설정(event) => void-
Made by Maeng