confirm

Funkcja confirm jest wygodną nakładką na komponent <mdui-dialog>. Funkcjonalnie służy jako zamiennik natywnej funkcji window.confirm. Dzięki niej nie musisz pisać kodu HTML komponentu, aby otworzyć okno potwierdzenia.

Sposób użycia

Zaimportuj funkcję:

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

Przykład użycia:

otwórz

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

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

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

  button.addEventListener("click", () => {
    confirm({
      headline: "Tytuł potwierdzenia",
      description: "Opis potwierdzenia",
      confirmText: "OK",
      cancelText: "Anuluj",
      onConfirm: () => console.log("potwierdzono"),
      onCancel: () => console.log("anulowano"),
    });
  });
</script>

API

confirm(options: Options): Promise<void>

Funkcja przyjmuje obiekt Options jako parametr; zwraca Promise. Jeśli okno zostanie zamknięte przez kliknięcie przycisku potwierdzenia, Promise zostanie rozwiązane (resolve). Jeśli zostanie zamknięte w inny sposób, Promise zostanie odrzucone (reject).

Options

Nazwa	Typ	Wartość domyślna
`headline`	`string`	-
Tytuł okna confirm
`description`	`string`	-
Tekst opisu okna confirm
`icon`	`string`	-
Nazwa ikony Material Icons na górze okna confirm
`closeOnEsc`	`boolean`	`false`
Czy zamknąć okno confirm po naciśnięciu klawisza ESC
`closeOnOverlayClick`	`boolean`	`false`
Czy zamknąć okno confirm po kliknięciu na nakładkę
`confirmText`	`string`	`OK`
Tekst przycisku potwierdzenia
`cancelText`	`string`	`Anuluj`
Tekst przycisku anulowania
`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 confirm będzie wyświetlanych jednocześnie. Możesz podać nazwę kolejki. Funkcje confirm 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ę.
`onConfirm`	`(dialog: Dialog) => void \| boolean \| Promise<void>`	-
Funkcja zwrotna wywoływana po kliknięciu przycisku potwierdzenia. Parametr funkcji to instancja okna dialogowego, `this` również wskazuje na instancję okna dialogowego. Domyślnie po kliknięciu przycisku potwierdzenia okno confirm 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.
`onCancel`	`(dialog: Dialog) => void \| boolean \| Promise<void>`	-
Funkcja zwrotna wywoływana po kliknięciu przycisku anulowania. Parametr funkcji to instancja okna dialogowego, `this` również wskazuje na instancję okna dialogowego. Domyślnie po kliknięciu przycisku anulowania okno confirm 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.
`onOpen`	`(dialog: Dialog) => void`	-
Funkcja zwrotna wywoływana na początku otwierania okna confirm. 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 confirm. 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 confirm. 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 confirm. 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.

Poprzedni rozdział

alert

Następny rozdział

prompt