dialog

La fonction dialog s'appuie sur le composant <mdui-dialog>. Elle permet d'ouvrir une boîte de dialogue sans avoir à écrire le code HTML correspondant.

Utilisation

Importez la fonction selon vos besoins :

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

Exemple d'utilisation :

ouvrir

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

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

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

  button.addEventListener("click", () => {
    dialog({
      headline: "Titre de la boîte de dialogue",
      description: "Description de la boîte de dialogue",
      actions: [
        {
          text: "Annuler",
        },
        {
          text: "OK",
          onClick: () => {
            console.log("confirmé");
            return false;
          },
        }
      ]
    });
  });
</script>

API

dialog(options: Options): Dialog

La fonction prend un objet Options en paramètre. La valeur de retour est l'instance du composant <mdui-dialog>.

Options

Nom de la propriété	Type	Valeur par défaut
`headline`	`string`	-
Titre de la boîte de dialogue
`description`	`string`	-
Texte de description de la boîte de dialogue
`body`	`string` \| `HTMLElement` \| `JQ<HTMLElement>`	-
Contenu du corps de la boîte de dialogue. Peut être une chaîne HTML, un élément DOM, ou un objet JQ.
`icon`	`string`	-
Nom de l'icône Material Icons affichée en haut de la boîte de dialogue
`closeOnEsc`	`boolean`	`false`
Indique si la boîte de dialogue se ferme lorsque la touche Échap est enfoncée.
`closeOnOverlayClick`	`boolean`	`false`
Indique si la boîte de dialogue se ferme lors d'un clic sur l'arrière-plan (overlay).
`actions`	`Action[]`	-
Tableau des boutons d'action en bas
`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 boîtes de dialogue s'affichent simultanément. Vous pouvez passer un nom de file d'attente. Les boîtes de dialogue 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.
`onOpen`	`(dialog: Dialog) => void`	-
Fonction de rappel lorsque la boîte de dialogue 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 boîte de dialogue 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 boîte de dialogue 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 boîte de dialogue 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.

Action

Nom de la propriété	Type	Valeur par défaut
`text`	`string`	-
Texte du bouton
`onClick`	`(dialog: Dialog) => void \| boolean \| Promise<void>`	-
Fonction de rappel déclenchée lors du clic sur le bouton. 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 ferme la boîte de dialogue. Si la fonction retourne `false`, la boîte de dialogue ne se ferme pas. Si elle retourne une promise, la boîte de dialogue se ferme une fois la promise résolue.

Chapitre précédent

Bibliothèque d'utilitaires jq

Chapitre suivant

alert