dialog

dialog 함수는 <mdui-dialog> 컴포넌트를 래핑한 것으로, 이 함수를 사용하면 컴포넌트의 HTML 코드를 작성하지 않고도 대화상자를 열 수 있습니다.

사용법

함수 가져오기:

import { dialog } from 'mdui/functions/dialog.js';

사용 예시:

열기

<mdui-button class="example-button">열기</mdui-button>

<script type="module">
  import { dialog } from "mdui/functions/dialog.js";

  const button = document.querySelector(".example-button");

  button.addEventListener("click", () => {
    dialog({
      headline: "대화상자 제목",
      description: "대화상자 설명",
      actions: [
        {
          text: "취소",
        },
        {
          text: "확인",
          onClick: () => {
            console.log("확인됨");
            return false;
          },
        }
      ]
    });
  });
</script>

API

dialog(options: Options): Dialog

함수는 Options 객체를 매개변수로 받습니다. 반환값은 <mdui-dialog> 컴포넌트 인스턴스입니다.

Options

속성명	타입	기본값
`headline`	`string`	-
dialog의 제목
`description`	`string`	-
dialog의 설명 텍스트
`body`	`string` \| `HTMLElement` \| `JQ<HTMLElement>`	-
dialog의 본문 내용, HTML 문자열, DOM 요소, 또는 JQ 객체일 수 있습니다.
`icon`	`string`	-
dialog 상단의 Material Icons 아이콘 이름
`closeOnEsc`	`boolean`	`false`
ESC 키를 누를 때 dialog를 닫을지 여부
`closeOnOverlayClick`	`boolean`	`false`
오버레이 클릭 시 dialog를 닫을지 여부
`actions`	`Action[]`	-
하단 작업 버튼 배열
`stackedActions`	`boolean`	`false`
하단 작업 버튼을 수직으로 배치할지 여부
`queue`	`string`	-
큐 이름. 기본적으로 큐가 비활성화되어 있어, 이 함수를 여러 번 호출하면 여러 개의 dialog가 동시에 표시됩니다. 이 매개변수에 큐 이름을 전달하면, 같은 큐 이름을 가진 dialog 함수는 이전 dialog가 닫힌 후에 다음 dialog를 엽니다. `dialog()`, `alert()`, `confirm()`, `prompt()` 네 함수의 큐 이름이 같으면 서로 같은 큐를 공유합니다.
`onOpen`	`(dialog: Dialog) => void`	-
dialog가 열리기 시작할 때의 콜백 함수. 함수 매개변수는 dialog 인스턴스이며, `this`도 dialog 인스턴스를 가리킵니다.
`onOpened`	`(dialog: Dialog) => void`	-
dialog 열기 애니메이션 완료 시의 콜백 함수. 함수 매개변수는 dialog 인스턴스이며, `this`도 dialog 인스턴스를 가리킵니다.
`onClose`	`(dialog: Dialog) => void`	-
dialog가 닫히기 시작할 때의 콜백 함수. 함수 매개변수는 dialog 인스턴스이며, `this`도 dialog 인스턴스를 가리킵니다.
`onClosed`	`(dialog: Dialog) => void`	-
dialog 닫기 애니메이션 완료 시의 콜백 함수. 함수 매개변수는 dialog 인스턴스이며, `this`도 dialog 인스턴스를 가리킵니다.
`onOverlayClick`	`(dialog: Dialog) => void`	-
오버레이 클릭 시의 콜백 함수. 함수 매개변수는 dialog 인스턴스이며, `this`도 dialog 인스턴스를 가리킵니다.

Action

속성명	타입	기본값
`text`	`string`	-
버튼 텍스트
`onClick`	`(dialog: Dialog) => void \| boolean \| Promise<void>`	-
버튼 클릭 시의 콜백 함수. 함수 매개변수는 dialog 인스턴스이며, `this`도 dialog 인스턴스를 가리킵니다. 기본적으로 버튼 클릭 시 dialog가 닫힙니다. 반환값이 `false`이면 dialog를 닫지 않고, promise를 반환하면 해당 promise가 resolve된 후 dialog를 닫습니다.

Chapitre précédent

Bibliothèque d'utilitaires jq

Chapitre suivant

alert