Dialog

Le composant boîte de dialogue permet d'afficher des informations importantes au moment opportun, sans interrompre inutilement le parcours de l'utilisateur.

En plus d'utiliser ce composant directement, mdui propose quatre fonctions utilitaires : mdui.dialog, mdui.alert, mdui.confirm, mdui.prompt. Ces fonctions simplifient l'utilisation du composant boîte de dialogue.

Utilisation

Importez le composant :

import 'mdui/components/dialog.js';

Importez le type TypeScript correspondant :

import type { Dialog } from 'mdui/components/dialog.js';

Exemple d'utilisation :

Boîte de dialogue Fermer

Ouvrir la boîte de dialogue

<mdui-dialog class="example-dialog">
  Boîte de dialogue
  <mdui-button>Fermer</mdui-button>
</mdui-dialog>

<mdui-button>Ouvrir la boîte de dialogue</mdui-button>

<script>
  const dialog = document.querySelector(".example-dialog");
  const openButton = dialog.nextElementSibling;
  const closeButton = dialog.querySelector("mdui-button");

  openButton.addEventListener("click", () => dialog.open = true);
  closeButton.addEventListener("click", () => dialog.open = false);
</script>

Exemples

Fermeture au clic sur l'arrière-plan

Ajoutez l'attribut close-on-overlay-click. Cliquer sur l'arrière-plan (overlay) ferme alors la boîte de dialogue.

Boîte de dialogue

Ouvrir la boîte de dialogue

<mdui-dialog close-on-overlay-click class="example-overlay">Boîte de dialogue</mdui-dialog>

<mdui-button>Ouvrir la boîte de dialogue</mdui-button>

<script>
  const dialog = document.querySelector(".example-overlay");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Source

Fermeture avec la touche Échap

Ajoutez l'attribut close-on-esc. Appuyer sur la touche Échap ferme alors la boîte de dialogue.

Boîte de dialogue

Ouvrir la boîte de dialogue

<mdui-dialog
  close-on-esc
  close-on-overlay-click
  class="example-esc"
>Boîte de dialogue</mdui-dialog>

<mdui-button>Ouvrir la boîte de dialogue</mdui-button>

<script>
  const dialog = document.querySelector(".example-esc");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Source

Plein écran

Ajoutez l'attribut fullscreen pour afficher la boîte de dialogue en plein écran.

Boîte de dialogue Fermer

Ouvrir la boîte de dialogue

<mdui-dialog fullscreen class="example-fullscreen">
  Boîte de dialogue
  <mdui-button>Fermer</mdui-button>
</mdui-dialog>

<mdui-button>Ouvrir la boîte de dialogue</mdui-button>

<script>
  const dialog = document.querySelector(".example-fullscreen");
  const openButton = dialog.nextElementSibling;
  const closeButton = dialog.querySelector("mdui-button");

  openButton.addEventListener("click", () => dialog.open = true);
  closeButton.addEventListener("click", () => dialog.open = false);
</script>

Source

Icône

Utilisez l'attribut icon pour ajouter une icône Material Icons en haut de la boîte de dialogue.

Dialog

Ouvrir la boîte de dialogue

<mdui-dialog
  icon="restart_alt"
  close-on-overlay-click
  class="example-icon"
>Dialog</mdui-dialog>

<mdui-button>Ouvrir la boîte de dialogue</mdui-button>

<script>
  const dialog = document.querySelector(".example-icon");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Source

Vous pouvez également utiliser le slot icon pour ajouter un élément d'icône en haut.

Dialog

Ouvrir la boîte de dialogue

<mdui-dialog close-on-overlay-click class="example-icon-slot">
  Dialog
  <mdui-icon slot="icon" name="restart_alt"></mdui-icon>
</mdui-dialog>

<mdui-button>Ouvrir la boîte de dialogue</mdui-button>

<script>
  const dialog = document.querySelector(".example-icon-slot");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Source

Titre et description

Utilisez les attributs headline et description pour définir le titre et la description de la boîte de dialogue.

Ouvrir la boîte de dialogue

<mdui-dialog
  headline="Supprimer les images sélectionnées ?"
  description="Les images seront définitivement supprimées de votre compte et de tous vos appareils synchronisés."
  close-on-overlay-click
  class="example-headline"
></mdui-dialog>

<mdui-button>Ouvrir la boîte de dialogue</mdui-button>

<script>
  const dialog = document.querySelector(".example-headline");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Source

Vous pouvez également utiliser les slots headline et description.

Supprimer les images sélectionnées ? Les images seront définitivement supprimées de votre compte et de tous vos appareils synchronisés.

Ouvrir la boîte de dialogue

<mdui-dialog close-on-overlay-click class="example-headline-slot">
  <span slot="headline">Supprimer les images sélectionnées ?</span>
  <span slot="description">Les images seront définitivement supprimées de votre compte et de tous vos appareils synchronisés.</span>
</mdui-dialog>

<mdui-button>Ouvrir la boîte de dialogue</mdui-button>

<script>
  const dialog = document.querySelector(".example-headline-slot");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Source

Boutons d'action en bas

Utilisez le slot action pour ajouter des boutons d'action en bas.

Annuler

Supprimer

Ouvrir la boîte de dialogue

<mdui-dialog
  close-on-overlay-click
  headline="Supprimer les images sélectionnées ?"
  class="example-action"
>
  <mdui-button slot="action" variant="text">Annuler</mdui-button>
  <mdui-button slot="action" variant="tonal">Supprimer</mdui-button>
</mdui-dialog>

<mdui-button>Ouvrir la boîte de dialogue</mdui-button>

<script>
  const dialog = document.querySelector(".example-action");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Source

Ajoutez l'attribut stacked-actions pour afficher les boutons d'action verticalement.

Activer la localisation

Non merci

Ouvrir la boîte de dialogue

<mdui-dialog
  stacked-actions
  close-on-overlay-click
  headline="Utiliser le service de localisation ?"
  class="example-stacked-actions"
>
  <mdui-button slot="action" variant="text">Activer la localisation</mdui-button>
  <mdui-button slot="action" variant="text">Non merci</mdui-button>
</mdui-dialog>

<mdui-button>Ouvrir la boîte de dialogue</mdui-button>

<script>
  const dialog = document.querySelector(".example-stacked-actions");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Source

Contenu en haut

Utilisez le slot header pour ajouter du contenu en haut de la boîte de dialogue.

Titre

Enregistrer

Ouvrir la boîte de dialogue

<mdui-dialog close-on-overlay-click class="example-header">
  <mdui-top-app-bar slot="header">
    <mdui-button-icon icon="close"></mdui-button-icon>
    <mdui-top-app-bar-title>Titre</mdui-top-app-bar-title>
    <mdui-button variant="text">Enregistrer</mdui-button>
  </mdui-top-app-bar>
  <div style="height: 100px"></div>
</mdui-dialog>

<mdui-button>Ouvrir la boîte de dialogue</mdui-button>

<script>
  const dialog = document.querySelector(".example-header");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Source

API

Propriétés

Attribut HTML	Propriété JavaScript	Type	Défaut
`icon`	`icon`	`string`	-
Nom de l'icône Material Icons en haut. Peut également être défini via `slot="icon"`.
`headline`	`headline`	`string`	-
Titre. Peut également être défini via `slot="headline"`.
`description`	`description`	`string`	-
Texte sous le titre. Peut également être défini via `slot="description"`.
`open`	`open`	`boolean`	`false`
Si la boîte de dialogue est ouverte
`fullscreen`	`fullscreen`	`boolean`	`false`
Si la boîte de dialogue est affichée en plein écran
`close-on-esc`	`closeOnEsc`	`boolean`	`false`
Si la boîte de dialogue peut être fermée en appuyant sur la touche Échap
`close-on-overlay-click`	`closeOnOverlayClick`	`boolean`	`false`
Si la boîte de dialogue peut être fermée en cliquant sur le calque de superposition
`stacked-actions`	`stackedActions`	`boolean`	`false`
Si les boutons d'action en bas doivent être empilés verticalement

Événements

Nom
`open`
Se déclenche lorsque la boîte de dialogue commence à s'ouvrir. Vous pouvez empêcher l'ouverture de la boîte de dialogue en appelant `event.preventDefault()`.
`opened`
Se déclenche lorsque l'animation d'ouverture de la boîte de dialogue est terminée.
`close`
Se déclenche lorsque la boîte de dialogue commence à se fermer. Vous pouvez empêcher la fermeture de la boîte de dialogue en appelant `event.preventDefault()`.
`closed`
Se déclenche lorsque l'animation de fermeture de la boîte de dialogue est terminée.
`overlay-click`
Se déclenche lors du clic sur le calque de superposition

Slots

Nom
`header`
Élément supérieur, contient par défaut le slot `icon` et le slot `headline`.
`icon`
Icône supérieure
`headline`
Titre supérieur
`description`
Texte sous le titre
Défaut
Contenu principal de la boîte de dialogue
`action`
Éléments dans la barre d'action inférieure

CSS Parts

Nom
`overlay`
Calque de superposition
`panel`
Conteneur de la boîte de dialogue
`header`
Partie en-tête de la boîte de dialogue, contient l'icône et le titre
`icon`
Icône supérieure, située dans l'en-tête
`headline`
Titre supérieur, situé dans l'en-tête
`body`
Partie corps de la boîte de dialogue
`description`
Partie texte secondaire, située dans le corps
`action`
Boutons d'action inférieurs

Propriétés CSS personnalisées

Nom
`--shape-corner`
Taille des coins arrondis du composant. Vous pouvez spécifier une valeur de pixel spécifique ; mais il est préférable de se référer au Design Tokens.
`--z-index`
Valeur CSS `z-index` du composant.

Chapitre précédent

Collapse

Chapitre suivant

Divider