dialog

La funzione dialog è un wrapper per il componente <mdui-dialog>. Fornisce un modo conveniente per aprire un dialogo senza scrivere HTML per il componente.

Utilizzo

Importa la funzione:

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

Esempio:

apri

<mdui-button class="example-button">apri</mdui-button>

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

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

  button.addEventListener("click", () => {
    dialog({
      headline: "Titolo del Dialogo",
      description: "Descrizione del dialogo",
      actions: [
        {
          text: "Annulla",
        },
        {
          text: "OK",
          onClick: () => {
            console.log("confermato");
            return false;
          },
        }
      ]
    });
  });
</script>

API

dialog(options: Options): Dialog

La funzione dialog accetta un oggetto Options come parametro e restituisce un'istanza del componente <mdui-dialog>.

Options

Proprietà	Tipo	Predefinito
`headline`	`string`	-
Il titolo del dialogo.
`description`	`string`	-
La descrizione del dialogo.
`body`	`string` \| `HTMLElement` \| `JQ<HTMLElement>`	-
Il contenuto del corpo del dialogo, accetta una stringa HTML, un elemento DOM o un oggetto JQ.
`icon`	`string`	-
Il nome dell'Icona Material visualizzata nella parte superiore del dialogo.
`closeOnEsc`	`boolean`	`false`
Indica se il dialogo può essere chiuso premendo il tasto Esc. Se impostato su `true`, il dialogo si chiude quando viene premuto il tasto Esc.
`closeOnOverlayClick`	`boolean`	`false`
Indica se il dialogo può essere chiuso cliccando sullo sfondo.
`actions`	`Action[]`	-
L'array dei pulsanti di azione inferiori.
`stackedActions`	`boolean`	`false`
Indica se impilare verticalmente i pulsanti di azione inferiori.
`queue`	`string`	-
Il nome della coda. Per impostazione predefinita, la coda è disabilitata. Se questa funzione viene invocata più volte, verranno visualizzati più dialoghi contemporaneamente. Se viene fornito un nome di coda, i dialoghi con lo stesso nome di coda si apriranno in sequenza, ciascuno dopo la chiusura del precedente. Le funzioni `dialog()`, `alert()`, `confirm()` e `prompt()` condividono la stessa coda se i loro nomi di coda corrispondono.
`onOpen`	`(dialog: Dialog) => void`	-
La callback si attiva quando il dialogo inizia ad aprirsi. La funzione riceve l'istanza del dialogo come parametro e `this` fa riferimento alla stessa istanza del dialogo.
`onOpened`	`(dialog: Dialog) => void`	-
La callback si attiva quando l'animazione di apertura del dialogo è completata. La funzione riceve l'istanza del dialogo come parametro e `this` fa riferimento alla stessa istanza del dialogo.
`onClose`	`(dialog: Dialog) => void`	-
La callback si attiva quando il dialogo inizia a chiudersi. La funzione riceve l'istanza del dialogo come parametro e `this` fa riferimento alla stessa istanza del dialogo.
`onClosed`	`(dialog: Dialog) => void`	-
La callback si attiva quando l'animazione di chiusura del dialogo è completata. La funzione riceve l'istanza del dialogo come parametro e `this` fa riferimento alla stessa istanza del dialogo.
`onOverlayClick`	`(dialog: Dialog) => void`	-
La callback si attiva quando fai clic sullo sfondo. La funzione riceve l'istanza del dialogo come parametro e `this` fa riferimento alla stessa istanza del dialogo.

Action

Proprietà	Tipo	Predefinito
`text`	`string`	-
Testo del pulsante.
`onClick`	`(dialog: Dialog) => void \| boolean \| Promise<void>`	-
La callback si attiva quando fai clic sul pulsante. La funzione riceve l'istanza del dialogo come parametro e `this` fa riferimento alla stessa istanza del dialogo. Per impostazione predefinita, un clic sul pulsante chiude il dialogo. Se il valore restituito è `false`, il dialogo rimane aperto. Se il valore restituito è una promise, il dialogo si chiude dopo che la promise viene risolta.

Capitolo precedente

Libreria jq

Capitolo successivo

alert