prompt

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

사용법

함수 가져오기:

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

사용 예시:

열기

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

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

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

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

API

prompt(options: Options): Promise<string>

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

Options

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

이전 장

confirm

다음 장

snackbar