alert

La fonction alert s'appuie sur le composant <mdui-dialog>. Elle remplace la fonction native window.alert. Elle permet d'ouvrir une boîte d'alerte sans avoir à écrire le code HTML du composant.

Utilisation

Importez la fonction selon vos besoins :

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

Exemple d'utilisation :

ouvrir

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

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

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

  button.addEventListener("click", () => {
    alert({
      headline: "Titre de l'alerte",
      description: "Description de l'alerte",
      confirmText: "OK",
      onConfirm: () => console.log("confirmé"),
    });
  });
</script>

API

alert(options: Options): Promise<void>

La fonction alert prend un objet Options en paramètre. La valeur de retour est une Promise. Si l'alerte est fermée via le bouton de confirmation, la Promise est résolue ; si elle est fermée par un autre moyen, la Promise est rejetée.

Options

Nom de la propriété	Type	Valeur par défaut
`headline`	`string`	-
Titre de l'alerte
`description`	`string`	-
Texte de description de l'alerte
`icon`	`string`	-
Nom de l'icône Material Icons affichée en haut de l'alerte
`closeOnEsc`	`boolean`	`false`
Indique si l'alerte se ferme lorsque la touche Échap est enfoncée.
`closeOnOverlayClick`	`boolean`	`false`
Indique si l'alerte se ferme lors d'un clic sur le fond (overlay).
`confirmText`	`string`	`OK`
Texte du bouton de confirmation.
`queue`	`string`	-
Nom de la file d'attente. Par défaut, la file d'attente n'est pas activée. Si la fonction est appelée plusieurs fois, plusieurs alertes s'affichent simultanément. Vous pouvez passer un nom de file d'attente. Les alertes partageant le même nom de file s'ouvriront l'une après l'autre, la suivante ne s'ouvrant qu'après la fermeture de la précédente. Les fonctions `dialog()`, `alert()`, `confirm()`, `prompt()` partagent la même file d'attente si le nom de file est identique.
`onConfirm`	`(dialog: Dialog) => void \| boolean \| Promise<void>`	-
Fonction de rappel déclenchée lors du clic sur le bouton de confirmation. Le paramètre de la fonction est l'instance de la boîte de dialogue, et `this` pointe également vers cette instance. Par défaut, cliquer sur le bouton de confirmation ferme l'alerte. Si la fonction retourne `false`, l'alerte ne se ferme pas. Si elle retourne une promise, l'alerte se ferme une fois la promise résolue.
`onOpen`	`(dialog: Dialog) => void`	-
Fonction de rappel lorsque l'alerte s'ouvre. Le paramètre de la fonction est l'instance de la boîte de dialogue, et `this` pointe également vers cette instance.
`onOpened`	`(dialog: Dialog) => void`	-
Fonction de rappel lorsque l'animation d'ouverture de l'alerte est terminée. Le paramètre de la fonction est l'instance de la boîte de dialogue, et `this` pointe également vers cette instance.
`onClose`	`(dialog: Dialog) => void`	-
Fonction de rappel lorsque l'alerte se ferme. Le paramètre de la fonction est l'instance de la boîte de dialogue, et `this` pointe également vers cette instance.
`onClosed`	`(dialog: Dialog) => void`	-
Fonction de rappel lorsque l'animation de fermeture de l'alerte est terminée. Le paramètre de la fonction est l'instance de la boîte de dialogue, et `this` pointe également vers cette instance.
`onOverlayClick`	`(dialog: Dialog) => void`	-
Fonction de rappel déclenchée lors d'un clic sur l'arrière-plan (overlay). Le paramètre de la fonction est l'instance de la boîte de dialogue, et `this` pointe également vers cette instance.

Chapitre précédent

dialog

Chapitre suivant

confirm