Dialog다이얼로그

대화상자는 사용자 작업 흐름 중에 중요한 알림을 제공할 때 사용합니다.

컴포넌트를 직접 사용하는 것 외에도 mdui는 네 가지 함수(mdui.dialog, mdui.alert, mdui.confirm, mdui.prompt)를 제공합니다. 이러한 함수는 Dialog 컴포넌트 사용을 간소화할 수 있습니다.

사용법

컴포넌트 가져오기:

import 'mdui/components/dialog.js';

컴포넌트의 TypeScript 타입 가져오기:

import type { Dialog } from 'mdui/components/dialog.js';

사용 예시:

Dialog 닫기

대화상자 열기

<mdui-dialog class="example-dialog">
  Dialog
  <mdui-button>닫기</mdui-button>
</mdui-dialog>

<mdui-button>대화상자 열기</mdui-button>

<script>
  const dialog = document.querySelector(".example-dialog");
  const openButton = dialog.nextElementSibling;
  const closeButton = dialog.querySelector("mdui-button");

  openButton.addEventListener("click", () => dialog.open = true);
  closeButton.addEventListener("click", () => dialog.open = false);
</script>

예시

오버레이 클릭 시 닫기

close-on-overlay-click 속성을 추가하면 오버레이 레이어를 클릭할 때 대화상자가 닫힙니다.

Dialog

대화상자 열기

<mdui-dialog close-on-overlay-click class="example-overlay">Dialog</mdui-dialog>

<mdui-button>대화상자 열기</mdui-button>

<script>
  const dialog = document.querySelector(".example-overlay");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

소스

ESC 키 누를 시 닫기

close-on-esc 속성을 추가하면 ESC 키를 누를 때 대화상자가 닫힙니다.

Dialog

대화상자 열기

<mdui-dialog
  close-on-esc
  close-on-overlay-click
  class="example-esc"
>Dialog</mdui-dialog>

<mdui-button>대화상자 열기</mdui-button>

<script>
  const dialog = document.querySelector(".example-esc");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

소스

전체 화면

fullscreen 속성을 추가하면 대화상자가 전체 화면으로 표시됩니다.

Dialog 닫기

대화상자 열기

<mdui-dialog fullscreen class="example-fullscreen">
  Dialog
  <mdui-button>닫기</mdui-button>
</mdui-dialog>

<mdui-button>대화상자 열기</mdui-button>

<script>
  const dialog = document.querySelector(".example-fullscreen");
  const openButton = dialog.nextElementSibling;
  const closeButton = dialog.querySelector("mdui-button");

  openButton.addEventListener("click", () => dialog.open = true);
  closeButton.addEventListener("click", () => dialog.open = false);
</script>

소스

아이콘

icon 속성을 설정하면 대화상자 상단에 Material Icons 아이콘이 추가됩니다.

Dialog

대화상자 열기

<mdui-dialog
  icon="restart_alt"
  close-on-overlay-click
  class="example-icon"
>Dialog</mdui-dialog>

<mdui-button>대화상자 열기</mdui-button>

<script>
  const dialog = document.querySelector(".example-icon");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

소스

icon 슬롯을 통해 대화상자 상단에 아이콘 요소를 추가할 수도 있습니다.

Dialog

대화상자 열기

<mdui-dialog close-on-overlay-click class="example-icon-slot">
  Dialog
  <mdui-icon slot="icon" name="restart_alt"></mdui-icon>
</mdui-dialog>

<mdui-button>대화상자 열기</mdui-button>

<script>
  const dialog = document.querySelector(".example-icon-slot");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

소스

제목과 설명

headline 및 description 속성으로 대화상자의 제목과 설명을 설정합니다.

대화상자 열기

<mdui-dialog
  headline="Delete selected images?"
  description="Images will be permanently removed from your account and all synced devices."
  close-on-overlay-click
  class="example-headline"
></mdui-dialog>

<mdui-button>대화상자 열기</mdui-button>

<script>
  const dialog = document.querySelector(".example-headline");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

소스

headline 및 description 슬롯을 통해 대화상자의 제목 요소와 설명 요소를 설정할 수도 있습니다.

Delete selected images? Images will be permanently removed from your account and all synced devices.

대화상자 열기

<mdui-dialog close-on-overlay-click class="example-headline-slot">
  <span slot="headline">Delete selected images?</span>
  <span slot="description">Images will be permanently removed from your account and all synced devices.</span>
</mdui-dialog>

<mdui-button>대화상자 열기</mdui-button>

<script>
  const dialog = document.querySelector(".example-headline-slot");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

소스

하단 작업 버튼

action 슬롯을 통해 하단 작업 버튼을 추가할 수 있습니다.

취소

삭제

대화상자 열기

<mdui-dialog
  close-on-overlay-click
  headline="Delete selected images?"
  class="example-action"
>
  <mdui-button slot="action" variant="text">취소</mdui-button>
  <mdui-button slot="action" variant="tonal">삭제</mdui-button>
</mdui-dialog>

<mdui-button>대화상자 열기</mdui-button>

<script>
  const dialog = document.querySelector(".example-action");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

소스

stacked-actions 속성을 추가하면 하단 작업 버튼을 세로로 배치합니다.

Turn on speed boost

No thanks

대화상자 열기

<mdui-dialog
  stacked-actions
  close-on-overlay-click
  headline="Use location service?"
  class="example-stacked-actions"
>
  <mdui-button slot="action" variant="text">Turn on speed boost</mdui-button>
  <mdui-button slot="action" variant="text">No thanks</mdui-button>
</mdui-dialog>

<mdui-button>대화상자 열기</mdui-button>

<script>
  const dialog = document.querySelector(".example-stacked-actions");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

소스

상단 내용

header 슬롯을 통해 대화상자 상단 내용을 설정할 수 있습니다.

Title

Save

대화상자 열기

<mdui-dialog close-on-overlay-click class="example-header">
  <mdui-top-app-bar slot="header">
    <mdui-button-icon icon="close"></mdui-button-icon>
    <mdui-top-app-bar-title>Title</mdui-top-app-bar-title>
    <mdui-button variant="text">Save</mdui-button>
  </mdui-top-app-bar>
  <div style="height: 100px"></div>
</mdui-dialog>

<mdui-button>대화상자 열기</mdui-button>

<script>
  const dialog = document.querySelector(".example-header");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

소스

API

속성

HTML 속성	JavaScript 프로퍼티	유형	기본값
`icon`	`icon`	`string`	-
상단의 Material Icons 아이콘 이름입니다. `slot="icon"`을 통해서도 설정할 수 있습니다.
`headline`	`headline`	`string`	-
제목입니다. `slot="headline"`을 통해서도 설정할 수 있습니다.
`description`	`description`	`string`	-
제목 아래의 텍스트입니다. `slot="description"`을 통해서도 설정할 수 있습니다.
`open`	`open`	`boolean`	`false`
다이얼로그를 열지 여부를 설정합니다.
`fullscreen`	`fullscreen`	`boolean`	`false`
다이얼로그를 전체 화면으로 표시할지 여부를 설정합니다.
`close-on-esc`	`closeOnEsc`	`boolean`	`false`
ESC 키를 눌러 다이얼로그를 닫을 수 있는지 여부를 설정합니다.
`close-on-overlay-click`	`closeOnOverlayClick`	`boolean`	`false`
오버레이를 클릭하여 다이얼로그를 닫을 수 있는지 여부를 설정합니다.
`stacked-actions`	`stackedActions`	`boolean`	`false`
하단 작업 버튼을 수직으로 정렬할지 여부를 설정합니다.

이벤트

이름
`open`
다이얼로그 열림이 시작될 때 발생합니다. `event.preventDefault()`를 호출하여 다이얼로그 열림을 막을 수 있습니다.
`opened`
다이얼로그 열림 애니메이션이 완료되면 발생합니다.
`close`
다이얼로그 닫힘이 시작될 때 발생합니다. `event.preventDefault()`를 호출하여 다이얼로그 닫힘을 막을 수 있습니다.
`closed`
다이얼로그 닫힘 애니메이션이 완료되면 발생합니다.
`overlay-click`
오버레이를 클릭할 때 발생합니다.

Slots

이름
`header`
상단 요소로, 기본적으로 `icon` slot과 `headline` slot을 포함합니다.
`icon`
상단 아이콘
`headline`
상단 제목
`description`
제목 아래의 텍스트
기본
다이얼로그 본문 콘텐츠
`action`
하단 작업 표시줄의 요소

CSS Parts

이름
`overlay`
오버레이
`panel`
다이얼로그 컨테이너
`header`
다이얼로그 header 부분으로, icon과 headline을 포함합니다.
`icon`
상단 아이콘, header 내에 위치합니다.
`headline`
상단 제목, header 내에 위치합니다.
`body`
다이얼로그 body 부분
`description`
보조 텍스트 부분, body 내에 위치합니다.
`action`
하단 작업 버튼

CSS 사용자 정의 속성

이름
`--shape-corner`
컴포넌트의 둥근 모서리 크기입니다. 구체적인 픽셀 값을 지정할 수 있지만, 디자인 토큰을 참조하는 것을 권장합니다.
`--z-index`
컴포넌트의 CSS `z-index` 값

이전 장

Collapse 접기

다음 장

Divider 구분선