dialog

Funkce dialog je rozšířením komponenty <mdui-dialog>. Díky tomu nemusíte pro otevření dialogu ručně psát HTML.

Způsob použití

Importujte funkci podle potřeby:

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

Příklad použití:

otevřít

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

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

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

  button.addEventListener("click", () => {
    dialog({
      headline: "Název dialogu",
      description: "Popis dialogu",
      actions: [
        {
          text: "Zrušit",
        },
        {
          text: "OK",
          onClick: () => {
            console.log("potvrzeno");
            return false;
          },
        }
      ]
    });
  });
</script>

API

dialog(options: Options): Dialog

Funkce přijímá jako parametr objekt Options a vrací instanci komponenty <mdui-dialog>.

Options

Název vlastnosti	Typ	Výchozí hodnota
`headline`	`string`	-
Název dialogu
`description`	`string`	-
Popis dialogu
`body`	`string` \| `HTMLElement` \| `JQ<HTMLElement>`	-
Obsah dialogu, může to být HTML řetězec, DOM prvek nebo JQ objekt.
`icon`	`string`	-
Název ikony Material Icons v záhlaví dialogu
`closeOnEsc`	`boolean`	`false`
Zda zavřít dialog při stisknutí klávesy ESC
`closeOnOverlayClick`	`boolean`	`false`
Zda zavřít dialog při kliknutí na překryvnou vrstvu
`actions`	`Action[]`	-
Pole akčních tlačítek ve spodní části
`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 dialogu. Funkce `dialog()`, `alert()`, `confirm()` a `prompt()` budou sdílet stejnou frontu, pokud mají stejný název fronty.
`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.

Action

Název vlastnosti	Typ	Výchozí hodnota
`text`	`string`	-
Text tlačítka
`onClick`	`(dialog: Dialog) => void \| boolean \| Promise<void>`	-
Funkce zpětného volání při kliknutí na tlačítko. Parametrem funkce je instance dialogu, `this` také odkazuje na instanci dialogu. Ve výchozím nastavení se po kliknutí na tlačítko 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.

Předchozí kapitola

Knihovna jq

Další kapitola

alert