DialogDialog

Dialogy slouží k zobrazení důležitých upozornění během práce uživatele.

Kromě přímého použití této komponenty poskytuje mdui také čtyři funkce: mdui.dialog, mdui.alert, mdui.confirm, mdui.prompt. Tyto funkce mohou práci s komponentou Dialog výrazně zjednodušit.

Způsob použití

Importujte komponentu podle potřeby:

import 'mdui/components/dialog.js';

Importujte TypeScript typy komponenty podle potřeby:

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

Příklad použití:

Dialog Zavřít

Otevřít dialog

<mdui-dialog class="example-dialog">
  Dialog
  <mdui-button>Zavřít</mdui-button>
</mdui-dialog>

<mdui-button>Otevřít dialog</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>

Příklady

Zavření kliknutím na překryvnou vrstvu

Přidejte atribut close-on-overlay-click, po kliknutí na překryvnou vrstvu se dialog zavře.

Dialog

Otevřít dialog

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

<mdui-button>Otevřít dialog</mdui-button>

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

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

Zdrojový kód

Zavření stisknutím klávesy ESC

Přidejte atribut close-on-esc, po stisknutí klávesy ESC se dialog zavře.

Dialog

Otevřít dialog

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

<mdui-button>Otevřít dialog</mdui-button>

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

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

Zdrojový kód

Celá obrazovka

Přidejte atribut fullscreen, dialog se zobrazí na celou obrazovku.

Dialog Zavřít

Otevřít dialog

<mdui-dialog fullscreen class="example-fullscreen">
  Dialog
  <mdui-button>Zavřít</mdui-button>
</mdui-dialog>

<mdui-button>Otevřít dialog</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>

Zdrojový kód

Ikona

Nastavením atributu icon se nad dialog přidá ikona Material Icons.

Dialog

Otevřít dialog

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

<mdui-button>Otevřít dialog</mdui-button>

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

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

Zdrojový kód

Lze také přidat prvek ikony nad dialog pomocí slotu icon.

Dialog

Otevřít 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>Otevřít dialog</mdui-button>

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

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

Zdrojový kód

Nadpis a popis

Pomocí atributů headline a description nastavte nadpis a popis dialogu.

Otevřít dialog

<mdui-dialog
  headline="Smazat vybrané obrázky?"
  description="Obrázky budou trvale odstraněny z vašeho účtu a všech synchronizovaných zařízení."
  close-on-overlay-click
  class="example-headline"
></mdui-dialog>

<mdui-button>Otevřít dialog</mdui-button>

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

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

Zdrojový kód

Lze také použít sloty headline a description k nastavení prvků nadpisu a popisu dialogu.

Smazat vybrané obrázky? Obrázky budou trvale odstraněny z vašeho účtu a všech synchronizovaných zařízení.

Otevřít dialog

<mdui-dialog close-on-overlay-click class="example-headline-slot">
  <span slot="headline">Smazat vybrané obrázky?</span>
  <span slot="description">Obrázky budou trvale odstraněny z vašeho účtu a všech synchronizovaných zařízení.</span>
</mdui-dialog>

<mdui-button>Otevřít dialog</mdui-button>

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

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

Zdrojový kód

Akční tlačítka ve spodní části

Pomocí slotu action můžete přidat akční tlačítka ve spodní části.

Zrušit

Smazat

Otevřít dialog

<mdui-dialog
  close-on-overlay-click
  headline="Smazat vybrané obrázky?"
  class="example-action"
>
  <mdui-button slot="action" variant="text">Zrušit</mdui-button>
  <mdui-button slot="action" variant="tonal">Smazat</mdui-button>
</mdui-dialog>

<mdui-button>Otevřít dialog</mdui-button>

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

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

Zdrojový kód

Přidejte atribut stacked-actions pro vertikální uspořádání akčních tlačítek ve spodní části.

Zapnout zrychlení

Ne, děkuji

Otevřít dialog

<mdui-dialog
  stacked-actions
  close-on-overlay-click
  headline="Použít službu určování polohy?"
  class="example-stacked-actions"
>
  <mdui-button slot="action" variant="text">Zapnout zrychlení</mdui-button>
  <mdui-button slot="action" variant="text">Ne, děkuji</mdui-button>
</mdui-dialog>

<mdui-button>Otevřít dialog</mdui-button>

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

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

Zdrojový kód

Obsah v horní části

Pomocí slotu header můžete nastavit obsah v horní části dialogu.

Název

Uložit

Otevřít dialog

<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>Název</mdui-top-app-bar-title>
    <mdui-button variant="text">Uložit</mdui-button>
  </mdui-top-app-bar>
  <div style="height: 100px"></div>
</mdui-dialog>

<mdui-button>Otevřít dialog</mdui-button>

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

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

Zdrojový kód

API

Vlastnosti

Atribut	Vlastnost	Typ	Výchozí
`icon`	`icon`	`string`	-
Název ikony z knihovny Material Icons nahoře. Lze také nastavit pomocí `slot="icon"`.
`headline`	`headline`	`string`	-
Nadpis. Lze také nastavit pomocí `slot="headline"`.
`description`	`description`	`string`	-
Text pod nadpisem. Lze také nastavit pomocí `slot="description"`.
`open`	`open`	`boolean`	`false`
Určuje, zda je dialog otevřený.
`fullscreen`	`fullscreen`	`boolean`	`false`
Určuje, zda se má dialog zobrazit na celou obrazovku.
`close-on-esc`	`closeOnEsc`	`boolean`	`false`
Určuje, zda lze dialog zavřít stisknutím klávesy ESC.
`close-on-overlay-click`	`closeOnOverlayClick`	`boolean`	`false`
Určuje, zda lze dialog zavřít kliknutím na překryvnou vrstvu.
`stacked-actions`	`stackedActions`	`boolean`	`false`
Určuje, zda mají být akční tlačítka dole uspořádána vertikálně.

Události

Název
`open`
Spustí se na začátku otevírání dialogu. Otevření lze zabránit voláním `event.preventDefault()`.
`opened`
Spustí se po dokončení animace otevření dialogu.
`close`
Spustí se na začátku zavírání dialogu. Zavření lze zabránit voláním `event.preventDefault()`.
`closed`
Spustí se po dokončení animace zavření dialogu.
`overlay-click`
Spustí se při kliknutí na překryvnou vrstvu.

Slots

Název
`header`
Prvky nahoře, standardně obsahuje sloty `icon` a `headline`.
`icon`
Ikona nahoře.
`headline`
Nadpis nahoře.
`description`
Text pod nadpisem.
(výchozí)
Hlavní obsah dialogu.
`action`
Prvky v panelu akcí dole.

CSS Parts

Název
`overlay`
Překryvná vrstva.
`panel`
Kontejner dialogu.
`header`
Část záhlaví dialogu, obsahuje ikonu a nadpis.
`icon`
Ikona nahoře, nachází se v záhlaví.
`headline`
Nadpis nahoře, nachází se v záhlaví.
`body`
Část těla dialogu.
`description`
Část vedlejšího textu, nachází se v těle.
`action`
Tlačítka akcí dole.

CSS Custom Properties

Název
`--shape-corner`
Velikost zaoblení rohů komponenty. Lze zadat konkrétní hodnotu v pixelech; doporučuje se však odkazovat na Designové tokeny.
`--z-index`
Hodnota CSS `z-index` komponenty.

Předchozí kapitola

Collapse Sbalovací panel

Další kapitola

Divider Oddělovač