mdui 2 est arrivé, basé sur Material Design 3 et les Web Components. Consultez la documentation de mdui 2 ici.

Boîte de dialogue

Dans mdui, le composant boîte de dialogue est très polyvalent et est souvent utilisé pour demander des informations à l’utilisateur, l’informer ou l’avertir.

Une seule boîte de dialogue est affichée à la fois. Si une autre boîte de dialogue est ouverte avant la fermeture de la boîte actuelle, elle est mise en file d’attente et s’ouvre une fois la boîte actuelle fermée.

Utilisation

Appel via attributs
Appel via JavaScript

Lecture associée

Spécifications Material Design : Composants - Boîte de dialogue

Style

Boîte de dialogue standard

Ceci est une boîte de dialogue standard.

Exemple

<div class="mdui-dialog">
  <div class="mdui-dialog-title">Are you sure?</div>
  <div class="mdui-dialog-content">You'll lose all photos and media!</div>
  <div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple">cancel</button>
    <button class="mdui-btn mdui-ripple">erase</button>
  </div>
</div>

Sans barre de titre

Cette boîte de dialogue n’a pas de barre de titre.

Exemple

<div class="mdui-dialog">
  <div class="mdui-dialog-content">Discard draft?</div>
  <div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple">cancel</button>
    <button class="mdui-btn mdui-ripple">discard</button>
  </div>
</div>

Boutons empilés

Les boutons au bas de la boîte de dialogue sont alignés horizontalement par défaut. Il suffit d’ajouter la classe .mdui-dialog-actions-stacked à <div class="mdui-dialog-actions"></div> pour empiler les boutons verticalement.

Exemple

<div class="mdui-dialog">
  <div class="mdui-dialog-title">Use Google's location service?</div>
  <div class="mdui-dialog-content">Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</div>
  <div class="mdui-dialog-actions mdui-dialog-actions-stacked">
    <button class="mdui-btn mdui-ripple">turn on speed boost</button>
    <button class="mdui-btn mdui-ripple">no thanks</button>
  </div>
</div>

Titre et boutons fixes

Lorsque le contenu de la boîte de dialogue dépasse la hauteur de la boîte, une barre de défilement apparaît dans .mdui-dialog-content.

Si vous placez .mdui-dialog-title et .mdui-dialog-actions à l’intérieur de .mdui-dialog-content, le titre et les boutons du bas défilent avec le contenu ; sinon, le titre et les boutons restent fixes en haut et en bas et ne défilent pas.

Exemple

<div class="mdui-dialog">
  <div class="mdui-dialog-content">
    <div class="mdui-dialog-title">Use Google's location service?</div>
    Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.
    <br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test
  </div>
  <div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple">no thanks</button>
    <button class="mdui-btn mdui-ripple">turn on speeboost</button>
  </div>
</div>

Contenu personnalisé

Dans une boîte de dialogue, seul <div class="mdui-dialog"></div> est requis ; le contenu à l’intérieur de cet élément peut être remplacé par n’importe quel HTML.

Dans l’exemple ci-dessous, un onglet est placé dans une boîte de dialogue :

Exemple

<div class="mdui-dialog" id="example-4">
  <div class="mdui-tab mdui-tab-full-width" id="example4-tab">
    <a href="#example4-tab1" class="mdui-ripple">web</a>
    <a href="#example4-tab2" class="mdui-ripple">shopping</a>
    <a href="#example4-tab3" class="mdui-ripple">videos</a>
  </div>
  <div id="example4-tab1" class="mdui-p-a-2">
    <p>tab 1</p>
    <p>tab 1</p>
    <p>tab 1</p>
    <p>tab 1</p>
    <p>tab 1</p>
    <p>tab 1</p>
  </div>
  <div id="example4-tab2" class="mdui-p-a-2">
    <p>tab 2</p>
    <p>tab 2</p>
    <p>tab 2</p>
    <p>tab 2</p>
    <p>tab 2</p>
    <p>tab 2</p>
  </div>
  <div id="example4-tab3" class="mdui-p-a-2">
    <p>tab 3</p>
    <p>tab 3</p>
    <p>tab 3</p>
    <p>tab 3</p>
    <p>tab 3</p>
    <p>tab 3</p>
  </div>
</div>

<script>
  var tab = new mdui.Tab('#example4-tab');
  document.getElementById('example-4').addEventListener('open.mdui.dialog', function () {
    tab.handleUpdate();
  });
</script>

Utilisation

Appel via attributs

Avec cette approche, aucun code JavaScript n’est nécessaire. Il suffit d’ajouter l’attribut mdui-dialog="options" à un élément déclencheur (par exemple, un bouton). Lors de l’utilisation de cette approche par attribut personnalisé, un paramètre supplémentaire target est requis pour spécifier la boîte de dialogue à contrôler ; sa valeur doit être le sélecteur CSS de la boîte de dialogue cible.

Exemple

<button class="mdui-btn mdui-ripple mdui-color-theme-accent" mdui-dialog="{target: '#exampleDialog'}">open</button>

<div class="mdui-dialog" id="exampleDialog">
  <div class="mdui-dialog-title">Are you sure?</div>
  <div class="mdui-dialog-content">You'll lose all photos and media!</div>
  <div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple" mdui-dialog-close>cancel</button>
    <button class="mdui-btn mdui-ripple" mdui-dialog-confirm>erase</button>
  </div>
</div>

Vous pouvez ajouter des attributs aux éléments contenus dans la boîte de dialogue pour lier des événements ; cela fonctionne également lors d’un appel via JavaScript.

Attribut	Description
`mdui-dialog-close`	Cliquer sur cet élément déclenchera l’événement `close.mdui.dialog` et fermera la boîte de dialogue.
`mdui-dialog-cancel`	Cliquer sur cet élément déclenchera l’événement `cancel.mdui.dialog`.
`mdui-dialog-confirm`	Cliquer sur cet élément déclenchera l’événement `confirm.mdui.dialog`.

Appel via JavaScript

Instancier le composant :

// selector est le sélecteur CSS, l’élément DOM ou la chaîne HTML de la boîte de dialogue
// options sont les paramètres de configuration, voir la liste des paramètres ci-dessous
var inst = new mdui.Dialog(selector, options);

Exécuter

Paramètre

Nom	Type	Défaut	Description
`overlay`	`boolean`	`true`	Indique si afficher un masque lors de l’ouverture de la boîte de dialogue.
`history`	`boolean`	`true`	Indique s’il faut ajouter un hash d’URL lors de l’ouverture de la boîte de dialogue. Si la valeur est true, la boîte de dialogue peut être fermée via le bouton de retour du navigateur ou le bouton de retour sur Android après son ouverture.
`modal`	`boolean`	`false`	Indique si la boîte de dialogue doit être modale. Si la valeur est false, cliquer sur la zone située en dehors de la boîte de dialogue la fermera ; sinon, elle ne se fermera pas.
`closeOnEsc`	`boolean`	`true`	Indique si la boîte de dialogue doit se fermer lorsqu’on appuie sur la touche Échap.
`closeOnCancel`	`boolean`	`true`	Indique si la boîte de dialogue doit se fermer lorsqu’on appuie sur le bouton d’annulation.
`closeOnConfirm`	`boolean`	`true`	Indique si la boîte de dialogue doit se fermer lorsqu’on appuie sur le bouton de confirmation.
`destroyOnClosed`	`boolean`	`false`	Indique si la boîte de dialogue doit être détruite automatiquement après sa fermeture.

Méthode

Nom de méthode	Description
`open()`	Ouvrir la boîte de dialogue.
`close()`	Fermer la boîte de dialogue.
`toggle()`	Basculer l’état ouvert de la boîte de dialogue.
`getState()`	Obtenir l’état de la boîte de dialogue. Il existe quatre états (`opening`, `opened`, `closing`, `closed`).
`destroy()`	Détruire la boîte de dialogue.
`handleUpdate()`	Réajuster la position de la boîte de dialogue et la hauteur de la barre de défilement. Si le contenu de la boîte de dialogue est modifié après son ouverture, cette méthode doit être appelée.

Événement

Nom de l'événement	Description	Cible	Paramètres
`open.mdui.dialog`	L’événement sera déclenché lorsque l’animation d’ouverture de la boîte de dialogue commencera.	`<div class="mdui-dialog"></div>`	`event._detail.inst` : instance
`opened.mdui.dialog`	L’événement sera déclenché lorsque l’animation d’ouverture de la boîte de dialogue se terminera.
`close.mdui.dialog`	L’événement sera déclenché lorsque l’animation de fermeture de la boîte de dialogue commencera.
`closed.mdui.dialog`	L’événement sera déclenché lorsque l’animation de fermeture de la boîte de dialogue se terminera.
`cancel.mdui.dialog`	L’événement sera déclenché lorsque le bouton d’annulation sera pressé.
`confirm.mdui.dialog`	L’événement sera déclenché lorsque le bouton de confirmation sera pressé.

Boîtes de dialogue prédéfinies

mdui a intégré plusieurs boîtes de dialogue prédéfinies pour les scénarios courants. Ces boîtes de dialogue prédéfinies ne sont appelées que via JavaScript et ne nécessitent pas d’écrire du code HTML.

Ces fonctions renvoient toutes une instance de boîte de dialogue.

mdui.dialog()

Ouvre une boîte de dialogue où le titre, le contenu, les boutons, etc. peuvent être personnalisés. Cette méthode est générique, et mdui.alert(), mdui.confirm() et mdui.prompt() sont toutes implémentées via elle.

mdui.dialog(options)

Exemple

mdui.dialog({
  title: 'title',
  content: 'content',
  buttons: [
    {
      text: 'Annuler'
    },
    {
      text: 'Confirmer',
      onClick: function(inst){
        mdui.alert('Fonction de rappel au clic sur le bouton de confirmation');
      }
    }
  ]
});

Paramètre

Nom	Type	Défaut	Description
`title`	`string`		Le titre de la boîte de dialogue.
`content`	`string`		Le contenu de la boîte de dialogue.
`buttons`	`array`		Un tableau de boutons, où chaque bouton est un objet avec des paramètres de bouton (voir le tableau ci-dessous).
`stackedButtons`	`boolean`	`false`	Indique si les boutons doivent être empilés verticalement.
`cssClass`	`string`		Classes CSS ajoutées à `.mdui-dialog`.
`history`	`boolean`	`true`	Indique s’il faut écouter l’événement `hashchange`. Si la valeur est true, la boîte de dialogue peut être fermée via le bouton de retour sur Android ou le bouton de retour du navigateur.
`overlay`	`boolean`	`true`	Indique si afficher un calque de superposition après l’ouverture de la boîte de dialogue.
`modal`	`boolean`	`false`	Indique si la boîte de dialogue doit être modale. Si la valeur est false, cliquer sur la zone située en dehors de la boîte de dialogue la fermera ; sinon, elle ne se fermera pas.
`closeOnEsc`	`boolean`	`true`	Indique si la boîte de dialogue doit se fermer lorsqu’on appuie sur la touche Échap.
`destroyOnClosed`	`boolean`	`true`	Indique si la boîte de dialogue doit être détruite automatiquement après sa fermeture.
`onOpen`	`function`		Fonction de rappel au début de l’animation d’ouverture. L’argument est l’instance de la boîte de dialogue.
`onOpened`	`function`		Fonction de rappel à la fin de l’animation d’ouverture. L’argument est l’instance de la boîte de dialogue.
`onClose`	`function`		Fonction de rappel au début de l’animation de fermeture. L’argument est l’instance de la boîte de dialogue.
`onClosed`	`function`		Fonction de rappel à la fin de l’animation de fermeture. L’argument est l’instance de la boîte de dialogue.

Paramètres du bouton :

Nom	Type	Défaut	Description
`text`	`string`		Texte du bouton.
`bold`	`boolean`	`false`	Indique si le texte du bouton est en gras.
`close`	`boolean`	`true`	Indique si la boîte de dialogue doit se fermer après le clic sur le bouton.
`onClick`	`function`		Fonction de rappel lorsque le bouton est cliqué.

mdui.alert()

Ouvre une boîte d’alerte, qui peut contenir un titre, du contenu et un bouton de confirmation :

mdui.alert(text, onConfirm, options)

mdui.alert(text, title, onConfirm, options)

Exemple

// Texte seulement
mdui.alert('content');

// Avec titre et texte
mdui.alert('content', 'title');

// Avec rappel
mdui.alert('content', 'title', function() {
  mdui.alert('Le bouton de confirmation a été cliqué');
});

// Avec texte et rappel
mdui.alert('content', function() {
  mdui.alert('Le bouton de confirmation a été cliqué');
});

text : texte
title : (facultatif) titre
onConfirm : (facultatif) rappel au clic sur le bouton de confirmation. L’argument est l’instance de la boîte de dialogue.
options : (facultatif) paramètres, voir le tableau ci-dessous.

Nom	Type	Défaut	Description
`confirmText`	`string`	`ok`	Texte du bouton de confirmation.
`history`	`boolean`	`true`	Indique s’il faut écouter l’événement `hashchange`. Si la valeur est true, la boîte de dialogue peut être fermée via le bouton de retour sur Android ou le bouton de retour du navigateur.
`modal`	`boolean`	`false`	Indique si la boîte de dialogue doit être modale. Si la valeur est false, cliquer sur la zone située en dehors de la boîte de dialogue la fermera ; sinon, elle ne se fermera pas.
`closeOnEsc`	`boolean`	`true`	Indique si la boîte de dialogue doit se fermer lorsqu’on appuie sur la touche Échap.
`closeOnConfirm`	`boolean`	`true`	Indique si la boîte de dialogue doit se fermer lorsqu’on appuie sur le bouton de confirmation.

mdui.confirm()

Ouvre une boîte de confirmation, qui peut contenir un titre, du contenu, un bouton de confirmation et un bouton d’annulation :

mdui.confirm(text, onConfirm, onCancel, options)

mdui.confirm(text, title, onConfirm, onCancel, options)

Exemple

// Avec texte et rappel de confirmation
mdui.confirm('content', function(){
  mdui.alert('Le bouton de confirmation a été cliqué');
});

// Avec texte, rappel de confirmation et rappel d’annulation
mdui.confirm('content',
  function(){
    mdui.alert('Le bouton de confirmation a été cliqué');
  },
  function(){
    mdui.alert('Le bouton d’annulation a été cliqué');
  }
);

// Avec texte, titre et rappel du bouton de confirmation
mdui.confirm('content', 'title', function(){
  mdui.alert('Le bouton de confirmation a été cliqué');
});

// Avec texte, titre, bouton de confirmation et rappels des boutons d’annulation
mdui.confirm('content', 'title',
  function(){
    mdui.alert('Le bouton de confirmation a été cliqué');
  },
  function(){
    mdui.alert('Le bouton d’annulation a été cliqué');
  }
);

text : texte
title : (facultatif) titre
onConfirm : (facultatif) rappel au clic sur le bouton de confirmation. L’argument est l’instance de la boîte de dialogue.
onCancel : (facultatif) rappel au clic sur le bouton d’annulation. L’argument est l’instance de la boîte de dialogue.
options : (facultatif) paramètres, voir le tableau ci-dessous.

Nom	Type	Défaut	Description
`confirmText`	`string`	`ok`	Texte du bouton de confirmation.
`cancelText`	`string`	`cancel`	Texte du bouton d’annulation.
`history`	`boolean`	`true`	Indique s’il faut écouter l’événement `hashchange`. Si la valeur est true, la boîte de dialogue peut être fermée via le bouton de retour sur Android ou le bouton de retour du navigateur.
`modal`	`boolean`	`false`	Indique si la boîte de dialogue doit être modale. Si la valeur est false, cliquer sur la zone située en dehors de la boîte de dialogue la fermera ; sinon, elle ne se fermera pas.
`closeOnEsc`	`boolean`	`true`	Indique si la boîte de dialogue doit se fermer lorsqu’on appuie sur la touche Échap.
`closeOnCancel`	`boolean`	`true`	Indique si la boîte de dialogue doit se fermer lorsqu’on appuie sur le bouton d’annulation.
`closeOnConfirm`	`boolean`	`true`	Indique si la boîte de dialogue doit se fermer lorsqu’on appuie sur le bouton de confirmation.

mdui.prompt()

Ouvre une boîte de dialogue qui invite l’utilisateur à saisir du texte, et peut contenir un titre, du contenu, un champ de texte, un bouton de confirmation et un bouton d’annulation :

mdui.prompt(label, onConfirm, onCancel, options)

mdui.prompt(label, title, onConfirm, onCancel, options)

Exemple

// Champ de texte sur une ligne
mdui.prompt('Ceci est un champ de texte sur une ligne',
  function (value) {
    mdui.alert('Vous avez saisi :' + value + ', Le bouton de confirmation a été cliqué');
  },
  function (value) {
    mdui.alert('Vous avez saisi :' + value + ', Le bouton d’annulation a été cliqué');
  }
);

// Champ de texte multiligne
mdui.prompt('Ceci est un champ de texte multiligne',
  function (value) {
    mdui.alert('Vous avez saisi :' + value + ', Le bouton de confirmation a été cliqué');
  },
  function (value) {
    mdui.alert('Vous avez saisi :' + value + ', Le bouton d’annulation a été cliqué');
  },
  {
    type: 'textarea'
  }
);

// Avec titre
mdui.prompt('Veuillez saisir du texte', 'title',
  function (value) {
    mdui.alert('Vous avez saisi :' + value + ', Le bouton de confirmation a été cliqué');
  },
  function (value) {
    mdui.alert('Vous avez saisi :' + value + ', Le bouton d’annulation a été cliqué');
  }
);

label : texte de l’étiquette flottante du champ de texte
title : (facultatif) titre
onConfirm : (facultatif) rappel au clic sur le bouton de confirmation. Il comprend deux paramètres : la valeur du champ de texte et l’instance de la boîte de dialogue.
onCancel : (facultatif) rappel au clic sur le bouton d’annulation. Il comprend deux paramètres : la valeur du champ de texte et l’instance de la boîte de dialogue.
options : (facultatif) paramètres, voir le tableau ci-dessous

Nom	Type	Défaut	Description
`confirmText`	`string`	`ok`	Texte du bouton de confirmation
`cancelText`	`string`	`cancel`	Texte du bouton d’annulation
`history`	`boolean`	`true`	Indique s’il faut écouter l’événement `hashchange`. Si la valeur est true, la boîte de dialogue peut être fermée via le bouton de retour sur Android ou le bouton de retour du navigateur.
`modal`	`boolean`	`false`	Indique si la boîte de dialogue doit être modale. Si la valeur est false, cliquer sur la zone située en dehors de la boîte de dialogue la fermera ; sinon, elle ne se fermera pas.
`closeOnEsc`	`boolean`	`true`	Indique si la boîte de dialogue doit se fermer lorsqu’on appuie sur la touche Échap.
`closeOnCancel`	`boolean`	`true`	Indique si la boîte de dialogue doit se fermer lorsqu’on appuie sur le bouton d’annulation
`closeOnConfirm`	`boolean`	`true`	Indique si la boîte de dialogue doit se fermer lorsqu’on appuie sur le bouton de confirmation
`confirmOnEnter`	`boolean`	`false`	Déclenche la fonction de rappel `onConfirm` lorsque la touche Entrée est pressée.
`type`	`string`	`text`	Type du champ de texte. `text` : champ de texte sur une ligne `textarea` : champ de texte multiligne
`maxlength`	`int`	`0`	Nombre maximal de caractères saisis
`defaultValue`	`string`	`''`	Valeur par défaut du champ de texte

Classes CSS

Nom de classe	Description
`.mdui-dialog`	Définit un composant de boîte de dialogue.
`.mdui-dialog-title`	Définit le titre de la boîte de dialogue.
`.mdui-dialog-content`	Définit le contenu de la boîte de dialogue.
`.mdui-dialog-actions`	Définit la barre d’actions de la boîte de dialogue.
`.mdui-dialog-actions-stacked`	Empile verticalement les boutons de la barre d’actions de la boîte de dialogue.

Tableau