prompt

La fonction prompt s'appuie sur le composant <mdui-dialog>. Elle remplace la fonction native window.prompt et permet d'ouvrir une boîte de dialogue avec un champ de saisie, sans avoir à écrire le code HTML correspondant.

Utilisation

Importez la fonction selon vos besoins :

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

Exemple d'utilisation :

ouvrir

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

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

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

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

API

prompt(options: Options): Promise<string>

La fonction prend un objet Options en paramètre et retourne une Promise. Si le Dialog est fermé via le bouton de confirmation, la Promise est résolue avec la valeur du champ de saisie. S'il est fermé autrement, la Promise est rejetée.

Options

Nom de la propriété	Type	Valeur par défaut
`headline`	`string`	-
Titre du prompt
`description`	`string`	-
Texte de description du prompt
`icon`	`string`	-
Nom d'icône Material Icons au sommet du prompt
`closeOnEsc`	`boolean`	`false`
Fermer le prompt lorsque vous appuyez sur la touche Échap
`closeOnOverlayClick`	`boolean`	`false`
Fermer le prompt lorsque vous cliquez sur le calque de masque
`confirmText`	`string`	`OK`
Texte du bouton de confirmation
`cancelText`	`string`	`Cancel`
Texte du bouton Annuler
`stackedActions`	`boolean`	`false`
Disposer verticalement les boutons d'action au bas
`queue`	`string`	-
Nom de la file d'attente. Par défaut, aucune file d'attente n'est activée. Lorsque vous appelez cette fonction plusieurs fois, plusieurs prompts s'affichent en même temps. Vous pouvez passer un nom de file d'attente dans ce paramètre. Les appels de la fonction prompt avec le même nom de file d'attente n'afficheront le prochain prompt qu'une fois le prompt précédent fermé. Si les noms de file d'attente des quatre fonctions `dialog()`, `alert()`, `confirm()`, et `prompt()` sont identiques, elles partageront également la même file d'attente.
`onConfirm`	`(value: string, dialog: Dialog) => void \| boolean \| Promise<void>`	-
Fonction de rappel lors du clic sur le bouton de confirmation. Les paramètres de la fonction sont la valeur du champ de saisie et l'instance du dialogue. `this` fait référence à l'instance du dialogue. Par défaut, le prompt se ferme après le clic sur le bouton de confirmation. Si la valeur de retour est `false`, le prompt ne se ferme pas. Si la valeur de retour est une Promise, le prompt se ferme après la résolution de la Promise.
`onCancel`	`(value: string, dialog: Dialog) => void \| boolean \| Promise<void>`	-
Fonction de rappel lors du clic sur le bouton Annuler. Les paramètres de la fonction sont la valeur du champ de saisie et l'instance du dialogue. `this` fait référence à l'instance du dialogue. Par défaut, le prompt se ferme après le clic sur le bouton Annuler. Si la valeur de retour est `false`, le prompt ne se ferme pas. Si la valeur de retour est une Promise, le prompt se ferme après la résolution de la Promise.
`onOpen`	`(dialog: Dialog) => void`	-
Fonction de rappel lorsque le prompt commence à s'ouvrir. Les paramètres de la fonction sont l'instance du dialogue. `this` fait également référence à l'instance du dialogue.
`onOpened`	`(dialog: Dialog) => void`	-
Fonction de rappel lorsque l'animation d'ouverture du prompt est terminée. Les paramètres de la fonction sont l'instance du dialogue. `this` fait également référence à l'instance du dialogue.
`onClose`	`(dialog: Dialog) => void`	-
Fonction de rappel lorsque le prompt commence à se fermer. Les paramètres de la fonction sont l'instance du dialogue. `this` fait également référence à l'instance du dialogue.
`onClosed`	`(dialog: Dialog) => void`	-
Fonction de rappel lorsque l'animation de fermeture du prompt est terminée. Les paramètres de la fonction sont l'instance du dialogue. `this` fait également référence à l'instance du dialogue.
`onOverlayClick`	`(dialog: Dialog) => void`	-
Fonction de rappel lors du clic sur le calque de masque. Les paramètres de la fonction sont l'instance du dialogue. `this` fait également référence à l'instance du dialogue.
`validator`	`(value: string) => boolean \| string \| Promise<void>`	-
Fonction de validation du champ de saisie. Le paramètre est la valeur du champ de saisie. `this` fait référence à l'instance TextField. Celle-ci sera utilisée pour la validation après la validation réussie de l'API de validation native du navigateur. Vous pouvez retourner une valeur `boolean`. Retourner `false` indique que la validation a échoué. Retourner `true` indique que la validation a réussi. Vous pouvez également retourner une chaîne. Une chaîne non vide indique que la validation a échoué, et la chaîne retournée sera utilisée comme message d'erreur. Vous pouvez également retourner une Promise. Résoudre la Promise indique que la validation a réussi. Rejeter la Promise indique que la validation a échoué, et la raison du rejet sera utilisée comme message d'erreur.
`textFieldOptions`	`Partial<TextField>`	-
Le champ de saisie à l'intérieur du prompt est le composant `<mdui-text-field>`. Vous pouvez définir les paramètres du composant `<mdui-text-field>` dans ce paramètre.

Chapitre précédent

confirm

Chapitre suivant

snackbar