prompt

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

Sposób użycia

Zaimportuj funkcję:

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

Przykład użycia:

otwórz

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

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

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

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

API

prompt(options: Options): Promise<string>

Parametrem funkcji jest obiekt Options; zwraca Promise. Jeśli okno zostanie zamknięte przez kliknięcie przycisku potwierdzenia, Promise zostanie rozwiązane (resolve) z wartością z pola tekstowego. Jeśli okno zostanie zamknięte w inny sposób, Promise zostanie odrzucone (reject).

Options

Nazwa	Typ	Wartość domyślna
`headline`	`string`	-
Tytuł okna prompt
`description`	`string`	-
Tekst opisu okna prompt
`icon`	`string`	-
Nazwa ikony Material Icons na górze okna prompt
`closeOnEsc`	`boolean`	`false`
Czy zamknąć okno prompt po naciśnięciu klawisza ESC
`closeOnOverlayClick`	`boolean`	`false`
Czy zamknąć okno prompt po kliknięciu na nakładkę
`confirmText`	`string`	`OK`
Tekst przycisku potwierdzenia
`cancelText`	`string`	`Cancel`
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 prompt będzie wyświetlanych jednocześnie. Możesz podać nazwę kolejki. Funkcje prompt 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`	`(value: string, dialog: Dialog) => void \| boolean \| Promise<void>`	-
Funkcja zwrotna wywoływana po kliknięciu przycisku potwierdzenia. Parametry funkcji to wartość pola tekstowego i instancja okna dialogowego, `this` wskazuje na instancję okna dialogowego. Domyślnie po kliknięciu przycisku potwierdzenia okno prompt 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`	`(value: string, dialog: Dialog) => void \| boolean \| Promise<void>`	-
Funkcja zwrotna wywoływana po kliknięciu przycisku anulowania. Parametry funkcji to wartość pola tekstowego i instancja okna dialogowego, `this` wskazuje na instancję okna dialogowego. Domyślnie po kliknięciu przycisku anulowania okno prompt 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 prompt. 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 prompt. 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 prompt. 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 prompt. 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.
`validator`	`(value: string) => boolean \| string \| Promise<void>`	-
Funkcja walidująca pole tekstowe. Parametr to wartość pola. `this` wskazuje na instancję TextField. Weryfikacja jest wykonywana po weryfikacji natywnego API przeglądarki. Można zwrócić wartość `boolean` – `false` oznacza niepowodzenie weryfikacji, `true` – sukces. Można też zwrócić ciąg znaków – niepusty ciąg oznacza niepowodzenie, a zwrócony ciąg będzie używany jako komunikat błędu. Można również zwrócić Promise – rozwiązanie Promise oznacza sukces, odrzucenie oznacza niepowodzenie, a przyczyna odrzucenia będzie komunikatem błędu.
`textFieldOptions`	`Partial<TextField>`	-
Wewnętrzne pole tekstowe w oknie prompt to komponent `<mdui-text-field>`. W tym parametrze można ustawić właściwości komponentu `<mdui-text-field>`.

Poprzedni rozdział

confirm

Następny rozdział

snackbar