confirm

confirm 함수는 <mdui-dialog> 컴포넌트를 래핑한 것으로, 기능상 시스템 기본 window.confirm 함수를 대체하기 위한 함수입니다. 이 함수를 사용하면 컴포넌트의 HTML 코드를 작성하지 않고도 확인 대화상자를 열 수 있습니다.

사용법

함수 가져오기:

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

사용 예시:

열기

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

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

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

  button.addEventListener("click", () => {
    confirm({
      headline: "확인 제목",
      description: "확인 설명",
      confirmText: "확인",
      cancelText: "취소",
      onConfirm: () => console.log("확인됨"),
      onCancel: () => console.log("취소됨"),
    });
  });
</script>

API

confirm(options: Options): Promise<void>

함수는 Options 객체를 매개변수로 받습니다. 반환값은 Promise이며, 확인 버튼을 클릭하여 닫히면 Promise가 resolve되고, 다른 방법으로 닫히면 reject됩니다.

Options

속성명	타입	기본값
`headline`	`string`	-
confirm의 제목
`description`	`string`	-
confirm의 설명 텍스트
`icon`	`string`	-
confirm 상단의 Material Icons 아이콘 이름
`closeOnEsc`	`boolean`	`false`
ESC 키를 누를 때 confirm를 닫을지 여부
`closeOnOverlayClick`	`boolean`	`false`
오버레이 클릭 시 confirm를 닫을지 여부
`confirmText`	`string`	`OK`
확인 버튼의 텍스트
`cancelText`	`string`	`Cancel`
취소 버튼의 텍스트
`stackedActions`	`boolean`	`false`
하단 작업 버튼을 수직으로 배치할지 여부
`queue`	`string`	-
큐 이름. 기본적으로 큐가 비활성화되어 있어, 이 함수를 여러 번 호출하면 여러 개의 confirm가 동시에 표시됩니다. 이 매개변수에 큐 이름을 전달하면, 같은 큐 이름을 가진 confirm 함수는 이전 confirm가 닫힌 후에 다음 confirm를 엽니다. `dialog()`, `alert()`, `confirm()`, `prompt()` 네 함수의 큐 이름이 같으면 서로 같은 큐를 공유합니다.
`onConfirm`	`(dialog: Dialog) => void \| boolean \| Promise<void>`	-
확인 버튼 클릭 시의 콜백 함수. 함수 매개변수는 dialog 인스턴스이며, `this`도 dialog 인스턴스를 가리킵니다. 기본적으로 확인 버튼 클릭 시 confirm가 닫힙니다. 반환값이 `false`이면 confirm를 닫지 않고, promise를 반환하면 해당 promise가 resolve된 후 confirm를 닫습니다.
`onCancel`	`(dialog: Dialog) => void \| boolean \| Promise<void>`	-
취소 버튼 클릭 시의 콜백 함수. 함수 매개변수는 dialog 인스턴스이며, `this`도 dialog 인스턴스를 가리킵니다. 기본적으로 취소 버튼 클릭 시 confirm가 닫힙니다. 반환값이 `false`이면 confirm를 닫지 않고, promise를 반환하면 해당 promise가 resolve된 후 confirm를 닫습니다.
`onOpen`	`(dialog: Dialog) => void`	-
confirm가 열리기 시작할 때의 콜백 함수. 함수 매개변수는 dialog 인스턴스이며, `this`도 dialog 인스턴스를 가리킵니다.
`onOpened`	`(dialog: Dialog) => void`	-
confirm 열기 애니메이션 완료 시의 콜백 함수. 함수 매개변수는 dialog 인스턴스이며, `this`도 dialog 인스턴스를 가리킵니다.
`onClose`	`(dialog: Dialog) => void`	-
confirm가 닫히기 시작할 때의 콜백 함수. 함수 매개변수는 dialog 인스턴스이며, `this`도 dialog 인스턴스를 가리킵니다.
`onClosed`	`(dialog: Dialog) => void`	-
confirm 닫기 애니메이션 완료 시의 콜백 함수. 함수 매개변수는 dialog 인스턴스이며, `this`도 dialog 인스턴스를 가리킵니다.
`onOverlayClick`	`(dialog: Dialog) => void`	-
오버레이 클릭 시의 콜백 함수. 함수 매개변수는 dialog 인스턴스이며, `this`도 dialog 인스턴스를 가리킵니다.

이전 장

alert

다음 장

prompt