prompt

Funkce prompt je rozšířením komponenty <mdui-dialog>. Nahrazuje nativní window.prompt, takže kvůli otevření dialogu pro zadání textu nemusíte ručně psát HTML.

Způsob použití

Importujte funkci podle potřeby:

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

Příklad použití:

otevřít

<mdui-button class="example-button">otevřít</mdui-button>

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

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

  button.addEventListener("click", () => {
    prompt({
      headline: "Název promptu",
      description: "Popis promptu",
      confirmText: "OK",
      cancelText: "Zrušit",
      onConfirm: (value) => console.log("potvrzeno: " + value),
      onCancel: () => console.log("zrušeno"),
    });
  });
</script>

API

prompt(options: Options): Promise<string>

Parametrem funkce je objekt Options; návratovou hodnotou je Promise. Pokud je dialog zavřen kliknutím na tlačítko OK, Promise bude vyřešen (resolve) s hodnotou z vstupního pole. Pokud je zavřen jiným způsobem, Promise bude odmítnut (reject).

Options

Název vlastnosti	Typ	Výchozí hodnota
`headline`	`string`	-
Název promptu
`description`	`string`	-
Popis promptu
`icon`	`string`	-
Název ikony Material Icons v záhlaví promptu
`closeOnEsc`	`boolean`	`false`
Určuje, zda se prompt zavře po stisknutí klávesy ESC.
`closeOnOverlayClick`	`boolean`	`false`
Zda zavřít prompt při kliknutí na překryvnou vrstvu
`confirmText`	`string`	`OK`
Text potvrzovacího tlačítka
`cancelText`	`string`	`Zrušit`
Text tlačítka zrušení
`stackedActions`	`boolean`	`false`
Zda vertikálně uspořádat akční tlačítka ve spodní části
`queue`	`string`	-
Název fronty. Ve výchozím nastavení není fronta zapnutá. Při opakovaném volání této funkce se zobrazí více dialogů současně. Zadáním názvu fronty zajistíte, že se dialogy se stejným názvem otevřou až po zavření předchozího promptu. Funkce `dialog()`, `alert()`, `confirm()` a `prompt()` budou sdílet stejnou frontu, pokud mají stejný název fronty.
`onConfirm`	`(value: string, dialog: Dialog) => void \| boolean \| Promise<void>`	-
Funkce zpětného volání při kliknutí na potvrzovací tlačítko. Parametry funkce jsou hodnota vstupního pole a instance dialogu. `this` odkazuje na instanci dialogu. Ve výchozím nastavení se po kliknutí na potvrzovací tlačítko dialog zavře; pokud je návratová hodnota `false`, dialog zůstane otevřený; pokud je návratová hodnota promise, dialog se zavře po jeho vyřešení (resolve).
`onCancel`	`(value: string, dialog: Dialog) => void \| boolean \| Promise<void>`	-
Funkce zpětného volání při kliknutí na tlačítko zrušení. Parametry funkce jsou hodnota vstupního pole a instance dialogu. `this` odkazuje na instanci dialogu. Ve výchozím nastavení se po kliknutí na tlačítko zrušení dialog zavře; pokud je návratová hodnota `false`, dialog se nezavře; pokud je návratová hodnota promise, dialog se zavře po vyřešení (resolve) tohoto promise.
`onOpen`	`(dialog: Dialog) => void`	-
Funkce zpětného volání při otevření dialogu. Parametrem funkce je instance dialogu, `this` také odkazuje na instanci dialogu.
`onOpened`	`(dialog: Dialog) => void`	-
Funkce zpětného volání po dokončení animace otevření dialogu. Parametrem funkce je instance dialogu, `this` také odkazuje na instanci dialogu.
`onClose`	`(dialog: Dialog) => void`	-
Funkce zpětného volání při zahájení zavírání dialogu. Parametrem funkce je instance dialogu, `this` také odkazuje na instanci dialogu.
`onClosed`	`(dialog: Dialog) => void`	-
Funkce zpětného volání po dokončení animace zavření dialogu. Parametrem funkce je instance dialogu, `this` také odkazuje na instanci dialogu.
`onOverlayClick`	`(dialog: Dialog) => void`	-
Funkce zpětného volání při kliknutí na překryvnou vrstvu. Parametrem funkce je instance dialogu, `this` také odkazuje na instanci dialogu.
`validator`	`(value: string) => boolean \| string \| Promise<void>`	-
Validační funkce vstupního pole. Parametrem je hodnota vstupního pole. `this` odkazuje na instanci TextField. Spustí se až po úspěšném ověření nativním validačním API prohlížeče. Může vrátit `boolean`. `false` znamená neúspěšné ověření, `true` znamená úspěšné ověření. Může také vrátit řetězec. Neprázdný řetězec znamená neúspěšné ověření a zároveň se použitý řetězec použije jako chybová zpráva. Může také vrátit Promise. Vyřešení (resolve) znamená úspěšné ověření, odmítnutí (reject) znamená neúspěšné ověření a důvod odmítnutí se použije jako chybová zpráva.
`textFieldOptions`	`Partial<TextField>`	-
Vstupním polem uvnitř promptu je komponenta `<mdui-text-field>`. V tomto parametru lze nastavit parametry komponenty `<mdui-text-field>`.

Předchozí kapitola

confirm

Další kapitola

snackbar