본문으로 건너뛰기

모달

오버레이되는 별도의 화면을 통해 여러개의 컴포넌트를 구성할 수 있습니다.

편집 페이지 내 모달 목록에서 모달 추가하기를 통해 모달을 생성할 수 있습니다.

모달은 편집 페이지 내 모달 목록에서 모달을 선택하여 수정하거나 확인할 수 있습니다.

워크플로우의 이벤트 핸들러에서 모달을 열거나 닫도록 할 수 있습니다. 버튼 컴포넌트의 실행 대상 프로퍼티에서도 모달을 열거나 닫게 할 수 있습니다. 모달 바깥을 클릭할 경우, 모달이 닫히게 됩니다.

프로퍼티​

프로퍼티타입설명
이름 (name)string모달 컴포넌트의 고유 이름
헤더 표시 (isHeaderVisible)boolean모달 컴포넌트 헤더 표시 여부
푸터 표시 (isFooterVisible)boolean모달 컴포넌트 푸터 표시 여부
너비 (width)ModalWidth모달 컴포넌트의 너비

이름 (name)​

모달 컴포넌트의 고유 이름을 입력할 수 있는 프로퍼티입니다. 이름 규칙을 참고해주세요.

헤더 표시 (isHeaderVisible)​

모달의 헤더 표시 여부를 선택할 수 있습니다.

푸터 표시 (isFooterVisible)​

모달의 푸터 표시 여부를 선택할 수 있습니다.

너비 (width)​

모달 컴포넌트의 너비를 설정할 수 있는 프로퍼티입니다.

다음과 같은 옵션 중에 선택할 수 있습니다.

  • 매우 작음 (540px)
  • 작음 (720px)
  • 중간 (900px, 기본)
  • 큼 (1080px)
  • 매우 큼 (1260px)
  • 전체화면 (100% - 160px)

헤더​

모달의 헤더 표시를 활성화하면 헤더를 자유롭게 구성할 수 있습니다. 헤더 내부의 컴포넌트들은 일반 컴포넌트들과 동일하게 프로퍼티 설정이 가능합니다.

헤더 내부는 기본 에디터와 마찬가지로 원하는 컴포넌트들을 추가하거나 수정할 수 있습니다.

본문​

모달의 본문을 자유롭게 구성할 수 있습니다. 본문 내부의 컴포넌트들은 일반 컴포넌트들과 동일하게 프로퍼티 설정이 가능합니다.

본문 내부는 기본 에디터와 마찬가지로 원하는 컴포넌트들을 추가하거나 수정할 수 있습니다.

푸터​

모달의 푸터 표시를 활성화하면 푸터를 자유롭게 구성할 수 있습니다. 푸터 내부의 컴포넌트들은 일반 컴포넌트들과 동일하게 프로퍼티 설정이 가능합니다.

푸터 내부는 기본 에디터와 마찬가지로 원하는 컴포넌트들을 추가하거나 수정할 수 있습니다.

상태​

프로퍼티타입설명
열림 여부 (isOpened)boolean모달의 열림 상태

타입 정의​

type ModalWidth =
  // 540px
  | 'xs'
  // 720px
  | 'sm'
  // 900px
  | 'md'
  // 1080px
  | 'lg'
  // 1260px
  | 'xl'
  // Fullscreen
  | 'full';