Dialogダイアログ

ダイアログは、ユーザーの操作フローにおいて重要な通知を提供するために使用されます。

このコンポーネントを直接使用する以外に、mdui は4つの関数 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`
ダイアログのヘッダー部分。icon と headline を含みます。
`icon`
上部のアイコン。header内にあります。
`headline`
上部のタイトル。header内にあります。
`body`
ダイアログのボディ部分
`description`
補助テキスト部分。body内にあります。
`action`
下部の操作ボタン

CSS カスタムプロパティ

名前
`--shape-corner`
コンポーネントの角丸のサイズ。ピクセル値で直接指定できますが、デザイントークンを参照することをお勧めします。
`--z-index`
コンポーネントのCSS `z-index` 値

前の章

Collapse 折りたたみ

次の章

Divider 区切り線