dialog

A dialog függvény a <mdui-dialog> komponenshez tartozó kényelmi függvény. A függvény használatával nem kell kézzel megírnia a komponens HTML-kódját, mégis azonnal megnyithat egy párbeszédablakot.

Használat

A függvény importálása:

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

Példa:

megnyitás

<mdui-button class="example-button">megnyitás</mdui-button>

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

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

  button.addEventListener("click", () => {
    dialog({
      headline: "Párbeszédablak címe",
      description: "Párbeszédablak leírása",
      actions: [
        {
          text: "Mégse",
        },
        {
          text: "OK",
          onClick: () => {
            console.log("megerősítve");
            return false;
          },
        }
      ]
    });
  });
</script>

API

dialog(options: Options): Dialog

A függvény egy Options objektumot vár paraméterként; visszatérési értéke a <mdui-dialog> komponens példánya.

Options

Attribútum név	Típus	Alapértelmezett érték
`headline`	`string`	-
a párbeszédablak címe
`description`	`string`	-
a dialog leíró szövege
`body`	`string` \| `HTMLElement` \| `JQ<HTMLElement>`	-
a dialog belsejében lévő body tartalom, lehet HTML karakterlánc, DOM elem vagy JQ objektum.
`icon`	`string`	-
a dialog tetején található Material Icons ikon neve
`closeOnEsc`	`boolean`	`false`
bezáródik-e a dialog az ESC billentyű lenyomásakor
`closeOnOverlayClick`	`boolean`	`false`
bezáródik-e a dialog a takarórétegre kattintva
`actions`	`Action[]`	-
az alsó műveleti gombok tömbje
`stackedActions`	`boolean`	`false`
függőlegesen rendezi-e az alsó műveleti gombokat
`queue`	`string`	-
Várólista neve. Alapértelmezés szerint nincs várólista, a függvény többszöri meghívásakor egyszerre több dialog jelenik meg. Ebben a paraméterben megadhat egy várólista nevet. Az azonos várólistanéven futó dialog függvények csak az előző dialog bezárása után nyitják meg a következőt. Ha a `dialog()`, `alert()`, `confirm()`, `prompt()` négy függvény várólistaneve megegyezik, akkor ugyanazt a várólistát használják.
`onOpen`	`(dialog: Dialog) => void`	-
A dialog nyitásának kezdetekor meghívódó visszahívási függvény. A függvény paramétere a dialog példány, a `this` is a dialog példányra mutat.
`onOpened`	`(dialog: Dialog) => void`	-
A dialog nyitási animációjának befejezésekor meghívódó visszahívási függvény. A függvény paramétere a dialog példány, a `this` is a dialog példányra mutat.
`onClose`	`(dialog: Dialog) => void`	-
A dialog zárásának kezdetekor meghívódó visszahívási függvény. A függvény paramétere a dialog példány, a `this` is a dialog példányra mutat.
`onClosed`	`(dialog: Dialog) => void`	-
A dialog zárási animációjának befejezésekor meghívódó visszahívási függvény. A függvény paramétere a dialog példány, a `this` is a dialog példányra mutat.
`onOverlayClick`	`(dialog: Dialog) => void`	-
A takarórétegre kattintáskor meghívódó visszahívási függvény. A függvény paramétere a dialog példány, a `this` is a dialog példányra mutat.

Action

Attribútum név	Típus	Alapértelmezett érték
`text`	`string`	-
a gomb szövege
`onClick`	`(dialog: Dialog) => void \| boolean \| Promise<void>`	-
A gombra kattintáskor meghívódó visszahívási függvény. A függvény paramétere a dialog példány, a `this` is a dialog példányra mutat. Alapértelmezés szerint a gombra kattintva a dialog bezáródik; ha a visszatérési érték `false`, akkor nem záródik be; ha a visszatérési érték egy promise, akkor a promise feloldódása után záródik be.

Előző fejezet

jq könyvtár

Következő fejezet

alert