alert

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

사용법

함수 가져오기:

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

사용 예시:

열기

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

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

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

  button.addEventListener("click", () => {
    alert({
      headline: "경고 제목",
      description: "경고 설명",
      confirmText: "확인",
      onConfirm: () => console.log("확인됨"),
    });
  });
</script>

API

alert(options: Options): Promise<void>

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

Options

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

이전 장

dialog

다음 장

confirm