dialog

Funkcja dialog jest wygodną nakładką na komponent <mdui-dialog>. Dzięki niej nie musisz pisać kodu HTML komponentu, aby otworzyć okno dialogowe.

Sposób użycia

Zaimportuj funkcję:

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

Przykład użycia:

otwórz

<mdui-button class="example-button">otwórz</mdui-button>

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

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

  button.addEventListener("click", () => {
    dialog({
      headline: "Tytuł okna dialogowego",
      description: "Opis okna dialogowego",
      actions: [
        {
          text: "Anuluj",
        },
        {
          text: "OK",
          onClick: () => {
            console.log("potwierdzono");
            return false;
          },
        }
      ]
    });
  });
</script>

API

dialog(options: Options): Dialog

Funkcja przyjmuje obiekt Options jako parametr; zwraca instancję komponentu <mdui-dialog>.

Options

Nazwa	Typ	Wartość domyślna
`headline`	`string`	-
Tytuł okna dialogowego
`description`	`string`	-
Tekst opisu okna dialogowego
`body`	`string` \| `HTMLElement` \| `JQ<HTMLElement>`	-
Treść body w oknie dialogowym. Może to być ciąg HTML, element DOM lub obiekt JQ.
`icon`	`string`	-
Nazwa ikony Material Icons na górze okna dialogowego
`closeOnEsc`	`boolean`	`false`
Czy zamknąć okno dialogowe po naciśnięciu klawisza ESC
`closeOnOverlayClick`	`boolean`	`false`
Czy zamknąć okno dialogowe po kliknięciu na nakładkę
`actions`	`Action[]`	-
Tablica przycisków akcji na dole
`stackedActions`	`boolean`	`false`
Czy przyciski akcji na dole mają być ułożone pionowo
`queue`	`string`	-
Nazwa kolejki. Domyślnie kolejka nie jest włączona. Przy wielokrotnym wywołaniu funkcji wiele okien dialogowych będzie wyświetlanych jednocześnie. Możesz podać nazwę kolejki. Funkcje dialog o tej samej nazwie kolejki będą otwierane jedno po drugim – następne zostanie otwarte po zamknięciu poprzedniego. `dialog()`, `alert()`, `confirm()`, `prompt()` – jeśli mają tę samą nazwę kolejki, będą współdzielić kolejkę.
`onOpen`	`(dialog: Dialog) => void`	-
Funkcja zwrotna wywoływana na początku otwierania okna dialogowego. Parametr funkcji to instancja okna dialogowego, `this` również wskazuje na instancję okna dialogowego.
`onOpened`	`(dialog: Dialog) => void`	-
Funkcja zwrotna wywoływana po zakończeniu animacji otwierania okna dialogowego. Parametr funkcji to instancja okna dialogowego, `this` również wskazuje na instancję okna dialogowego.
`onClose`	`(dialog: Dialog) => void`	-
Funkcja zwrotna wywoływana na początku zamykania okna dialogowego. Parametr funkcji to instancja okna dialogowego, `this` również wskazuje na instancję okna dialogowego.
`onClosed`	`(dialog: Dialog) => void`	-
Funkcja zwrotna wywoływana po zakończeniu animacji zamykania okna dialogowego. Parametr funkcji to instancja okna dialogowego, `this` również wskazuje na instancję okna dialogowego.
`onOverlayClick`	`(dialog: Dialog) => void`	-
Funkcja zwrotna wywoływana po kliknięciu na nakładkę. Parametr funkcji to instancja okna dialogowego, `this` również wskazuje na instancję okna dialogowego.

Action

Nazwa	Typ	Wartość domyślna
`text`	`string`	-
Tekst przycisku
`onClick`	`(dialog: Dialog) => void \| boolean \| Promise<void>`	-
Funkcja zwrotna wywoływana po kliknięciu przycisku. Parametr funkcji to instancja okna dialogowego, `this` również wskazuje na instancję okna dialogowego. Domyślnie po kliknięciu przycisku okno dialogowe zostanie zamknięte. Jeśli funkcja zwróci `false`, okno nie zostanie zamknięte. Jeśli zwróci Promise, okno zostanie zamknięte po rozwiązaniu tego Promise.

Poprzedni rozdział

Biblioteka narzędziowa jq

Następny rozdział

alert