alert

La funzione alert, un wrapper per il componente <mdui-dialog>, sostituisce la funzione nativa window.alert e consente di creare dialoghi di avviso senza scrivere HTML.

Utilizzo

Importa la funzione:

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

Esempio:

apri

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

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

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

  button.addEventListener("click", () => {
    alert({
      headline: "Titolo Avviso",
      description: "Descrizione avviso",
      confirmText: "OK",
      onConfirm: () => console.log("confermato"),
    });
  });
</script>

API

alert(options: Options): Promise<void>

La funzione alert accetta un oggetto Options e restituisce una Promise. La Promise viene risolta se l'utente chiude il dialogo facendo clic sul pulsante di conferma, e respinta se il dialogo viene chiuso in altro modo.

Options

Proprietà	Tipo	Predefinito
`headline`	`string`	-
Il titolo del dialogo.
`description`	`string`	-
La descrizione del dialogo.
`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.
`confirmText`	`string`	`OK`
Il testo per il pulsante di conferma.
`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.
`onConfirm`	`(dialog: Dialog) => void \| boolean \| Promise<void>`	-
La callback si attiva quando fai clic sul pulsante di conferma. 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 di conferma 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.
`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.

Capitolo precedente

dialog

Capitolo successivo

confirm