confirm

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

Utilisation

Importez la fonction selon vos besoins :

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

Exemple d'utilisation :

ouvrir

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

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

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

  button.addEventListener("click", () => {
    confirm({
      headline: "Titre de confirmation",
      description: "Description de confirmation",
      confirmText: "OK",
      cancelText: "Annuler",
      onConfirm: () => console.log("confirmé"),
      onCancel: () => console.log("annulé"),
    });
  });
</script>

API

confirm(options: Options): Promise<void>

La fonction prend un objet Options en paramètre. La valeur de retour est une Promise. Si la boîte de confirmation 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 la confirmation
`description`	`string`	-
Texte de description de la confirmation
`icon`	`string`	-
Nom de l'icône Material Icons affichée en haut de la confirmation
`closeOnEsc`	`boolean`	`false`
Indique si la confirmation se ferme lorsque la touche Échap est enfoncée.
`closeOnOverlayClick`	`boolean`	`false`
Indique si la confirmation se ferme lors d'un clic sur le fond (overlay).
`confirmText`	`string`	`OK`
Texte du bouton de confirmation.
`cancelText`	`string`	`Cancel`
Texte du bouton d'annulation.
`stackedActions`	`boolean`	`false`
Indique si les boutons d'action en bas doivent être empilés verticalement.
`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 confirmations s'affichent simultanément. Vous pouvez passer un nom de file d'attente. Les confirmations 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 la confirmation. Si la fonction retourne `false`, la confirmation ne se ferme pas. Si elle retourne une promise, la confirmation se ferme une fois la promise résolue.
`onCancel`	`(dialog: Dialog) => void \| boolean \| Promise<void>`	-
Fonction de rappel déclenchée lors du clic sur le bouton d'annulation. 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 d'annulation ferme la confirmation. Si la fonction retourne `false`, la confirmation ne se ferme pas. Si elle retourne une promise, la confirmation se ferme une fois la promise résolue.
`onOpen`	`(dialog: Dialog) => void`	-
Fonction de rappel lorsque la confirmation 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 la confirmation 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 la confirmation 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 la confirmation 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

alert

Chapitre suivant

prompt