DialogOkno dialogowe

Okno dialogowe wyświetla ważne powiadomienia podczas interakcji użytkownika.

Oprócz bezpośredniego używania tego komponentu, mdui udostępnia cztery funkcje: mdui.dialog, mdui.alert, mdui.confirm, mdui.prompt. Funkcje te upraszczają korzystanie z komponentu Dialog.

Sposób użycia

Zaimportuj komponent:

import 'mdui/components/dialog.js';

Zaimportuj typ TypeScript komponentu:

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

Przykład użycia:

Dialog Zamknij

Otwórz okno dialogowe

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

<mdui-button>Otwórz okno dialogowe</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>

Przykłady

Zamknięcie po kliknięciu na osłonie

Dodanie atrybutu close-on-overlay-click zamknie okno dialogowe po kliknięciu na osłonę.

Dialog

Otwórz okno dialogowe

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

<mdui-button>Otwórz okno dialogowe</mdui-button>

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

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

Źródło

Zamknięcie po naciśnięciu klawisza ESC

Dodanie atrybutu close-on-esc zamknie okno dialogowe po naciśnięciu klawisza ESC.

Dialog

Otwórz okno dialogowe

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

<mdui-button>Otwórz okno dialogowe</mdui-button>

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

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

Źródło

Pełny ekran

Dodanie atrybutu fullscreen wyświetli okno dialogowe na pełnym ekranie.

Dialog Zamknij

Otwórz okno dialogowe

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

<mdui-button>Otwórz okno dialogowe</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>

Źródło

Ikona

Ustawienie atrybutu icon spowoduje dodanie ikony Material Icons nad oknem dialogowym.

Dialog

Otwórz okno dialogowe

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

<mdui-button>Otwórz okno dialogowe</mdui-button>

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

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

Źródło

Możesz również dodać element ikony nad oknem dialogowym za pomocą slotu icon.

Dialog

Otwórz okno dialogowe

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

<mdui-button>Otwórz okno dialogowe</mdui-button>

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

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

Źródło

Tytuł i opis

Ustaw tytuł i opis okna dialogowego za pomocą atrybutów headline i description.

Otwórz okno dialogowe

<mdui-dialog
  headline="Usunąć wybrane obrazy?"
  description="Obrazy zostaną trwale usunięte z Twojego konta i wszystkich synchronizowanych urządzeń."
  close-on-overlay-click
  class="example-headline"
></mdui-dialog>

<mdui-button>Otwórz okno dialogowe</mdui-button>

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

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

Źródło

Możesz również ustawić elementy tytułu i opisu za pomocą slotów headline i description.

Usunąć wybrane obrazy? Obrazy zostaną trwale usunięte z Twojego konta i wszystkich synchronizowanych urządzeń.

Otwórz okno dialogowe

<mdui-dialog close-on-overlay-click class="example-headline-slot">
  <span slot="headline">Usunąć wybrane obrazy?</span>
  <span slot="description">Obrazy zostaną trwale usunięte z Twojego konta i wszystkich synchronizowanych urządzeń.</span>
</mdui-dialog>

<mdui-button>Otwórz okno dialogowe</mdui-button>

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

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

Źródło

Przyciski akcji na dole

Możesz dodać przyciski akcji na dole za pomocą slotu action.

Anuluj

Usuń

Otwórz okno dialogowe

<mdui-dialog
  close-on-overlay-click
  headline="Usunąć wybrane obrazy?"
  class="example-action"
>
  <mdui-button slot="action" variant="text">Anuluj</mdui-button>
  <mdui-button slot="action" variant="tonal">Usuń</mdui-button>
</mdui-dialog>

<mdui-button>Otwórz okno dialogowe</mdui-button>

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

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

Źródło

Dodanie atrybutu stacked-actions spowoduje ułożenie przycisków akcji na dole w pionie.

Włącz przyspieszenie

Nie, dziękuję

Otwórz okno dialogowe

<mdui-dialog
  stacked-actions
  close-on-overlay-click
  headline="Użyć usługi lokalizacji?"
  class="example-stacked-actions"
>
  <mdui-button slot="action" variant="text">Włącz przyspieszenie</mdui-button>
  <mdui-button slot="action" variant="text">Nie, dziękuję</mdui-button>
</mdui-dialog>

<mdui-button>Otwórz okno dialogowe</mdui-button>

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

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

Źródło

Treść na górze

Możesz ustawić treść na górze okna dialogowego za pomocą slotu header.

Tytuł

Zapisz

Otwórz okno dialogowe

<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>Tytuł</mdui-top-app-bar-title>
    <mdui-button variant="text">Zapisz</mdui-button>
  </mdui-top-app-bar>
  <div style="height: 100px"></div>
</mdui-dialog>

<mdui-button>Otwórz okno dialogowe</mdui-button>

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

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

Źródło

API

Właściwości

Atrybut HTML	Właściwość JavaScript	Typ	Domyślne
`icon`	`icon`	`string`	-
Nazwa ikony Material Icons u góry. Można również ustawić za pomocą `slot="icon"`
`headline`	`headline`	`string`	-
Tytuł. Można również ustawić za pomocą `slot="headline"`
`description`	`description`	`string`	-
Tekst pod tytułem. Można również ustawić za pomocą `slot="description"`
`open`	`open`	`boolean`	`false`
Określa, czy okno dialogowe jest otwarte.
`fullscreen`	`fullscreen`	`boolean`	`false`
Określa, czy wyświetlić okno dialogowe na pełnym ekranie.
`close-on-esc`	`closeOnEsc`	`boolean`	`false`
Określa, czy klawisz ESC zamyka okno dialogowe.
`close-on-overlay-click`	`closeOnOverlayClick`	`boolean`	`false`
Określa, czy kliknięcie nakładki zamyka okno dialogowe.
`stacked-actions`	`stackedActions`	`boolean`	`false`
Określa, czy przyciski akcji mają być ułożone pionowo.

Zdarzenia

Nazwa
`open`
Wywoływane przed otwarciem okna dialogowego. Można zapobiec otwarciu, wywołując `event.preventDefault()`
`opened`
Wywoływane po zakończeniu animacji otwierania okna dialogowego
`close`
Wywoływane przed zamknięciem okna dialogowego. Można zapobiec zamknięciu, wywołując `event.preventDefault()`
`closed`
Wywoływane po zakończeniu animacji zamykania okna dialogowego
`overlay-click`
Wywoływane po kliknięciu warstwy nakładki

Slots

Nazwa
`header`
Element u góry, domyślnie zawiera slot `icon` i `headline`
`icon`
Ikona u góry
`headline`
Tytuł u góry
`description`
Tekst pod tytułem
(domyślny)
Główna treść okna dialogowego
`action`
Elementy na pasku akcji na dole

CSS Parts

Nazwa
`overlay`
Warstwa nakładki
`panel`
Kontener okna dialogowego
`header`
Część nagłówkowa okna dialogowego, zawiera ikonę i nagłówek
`icon`
Ikona u góry, znajdująca się w nagłówku
`headline`
Tytuł u góry, znajdujący się w nagłówku
`body`
Część główna okna dialogowego
`description`
Część z tekstem dodatkowym, znajdująca się w części głównej
`action`
Przyciski akcji na dole

Właściwości niestandardowe CSS

Nazwa
`--shape-corner`
Wielkość zaokrąglenia rogów komponentu. Można określić konkretną wartość w pikselach; ale zaleca się odwołanie do tokenów projektowych
`--z-index`
Wartość CSS `z-index` komponentu

Poprzedni rozdział

Collapse Panel zwijany

Następny rozdział

Divider Separator