Snackbar

Le composant Snackbar affiche de brefs messages sur l'état de l'application.

En plus d'utiliser ce composant directement, mdui propose une fonction mdui.snackbar qui simplifie son utilisation.

Utilisation

Importez le composant selon vos besoins :

import 'mdui/components/snackbar.js';

Importez le type TypeScript correspondant :

import type { Snackbar } from 'mdui/components/snackbar.js';

Exemple d'utilisation :

Photo archivée

Afficher le message

<mdui-snackbar class="example-snackbar">Photo archivée</mdui-snackbar>

<mdui-button>Afficher le message</mdui-button>

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

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

Exemples

Position

Utilisez l'attribut placement pour définir la position d'affichage.

Photo archivée

top-start

Photo archivée

top

Photo archivée

top-end

Photo archivée

bottom-start

Photo archivée

bottom

Photo archivée

bottom-end

<div class="example-placement">
  <div class="row">
    <mdui-snackbar placement="top-start">Photo archivée</mdui-snackbar>
    <mdui-button variant="outlined">top-start</mdui-button>

    <mdui-snackbar placement="top">Photo archivée</mdui-snackbar>
    <mdui-button variant="outlined">top</mdui-button>

    <mdui-snackbar placement="top-end">Photo archivée</mdui-snackbar>
    <mdui-button variant="outlined">top-end</mdui-button>
  </div>
  <div class="row">
    <mdui-snackbar placement="bottom-start">Photo archivée</mdui-snackbar>
    <mdui-button variant="outlined">bottom-start</mdui-button>

    <mdui-snackbar placement="bottom">Photo archivée</mdui-snackbar>
    <mdui-button variant="outlined">bottom</mdui-button>

    <mdui-snackbar placement="bottom-end">Photo archivée</mdui-snackbar>
    <mdui-button variant="outlined">bottom-end</mdui-button>
  </div>
</div>

<script>
  const snackbars = document.querySelectorAll(".example-placement mdui-snackbar");

  snackbars.forEach((snackbar) => {
    const button = snackbar.nextElementSibling;
    button.addEventListener("click", () => snackbar.open = true);
  });
</script>

<style>
.example-placement mdui-button {
  margin: 0.25rem;
  width: 7.5rem;
}
</style>

Source

Bouton d'action

Utilisez l'attribut action pour ajouter un bouton à droite. Un clic sur ce bouton déclenche l'événement action-click. Ajoutez action-loading pour afficher un état de chargement.

Photo archivée

Afficher le message

<mdui-snackbar action="Annuler" class="example-action">Photo archivée</mdui-snackbar>

<mdui-button>Afficher le message</mdui-button>

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

  snackbar.addEventListener("action-click", () => {
    snackbar.actionLoading = true;
    setTimeout(() => snackbar.actionLoading = false, 2000);
  });

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

Source

Vous pouvez également utiliser le slot action pour un élément personnalisé.

Photo archivée Annuler

Afficher le message

<mdui-snackbar class="example-action-slot">
  Photo archivée
  <mdui-button slot="action" variant="text">Annuler</mdui-button>
</mdui-snackbar>

<mdui-button>Afficher le message</mdui-button>

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

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

Source

Fermable

Ajoutez l'attribut closeable pour afficher un bouton de fermeture à droite. Un clic sur ce bouton ferme le snackbar et déclenche l'événement close.

Photo archivée

Afficher le message

<mdui-snackbar closeable class="example-closeable">Photo archivée</mdui-snackbar>

<mdui-button>Afficher le message</mdui-button>

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

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

Source

Personnalisez le bouton à l'aide du slot close-button.

Photo archivée

Afficher le message

<mdui-snackbar closeable class="example-close-button-slot">
  Photo archivée
  <mdui-avatar slot="close-button" icon="people_alt"></mdui-avatar>
</mdui-snackbar>

<mdui-button>Afficher le message</mdui-button>

<script>
  const snackbar = document.querySelector(".example-close-button-slot");
  const openButton = snackbar.nextElementSibling;

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

Source

Personnalisez l'icône du bouton à l'aide de l'attribut close-icon ou du slot close-icon.

Photo archivée

Afficher le message

<mdui-snackbar
  closeable
  close-icon="delete"
  class="example-close-icon"
>Photo archivée</mdui-snackbar>

<mdui-button>Afficher le message</mdui-button>

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

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

Source

Nombre de lignes du message

Par défaut, le nombre de lignes du message n'est pas limité. Utilisez message-line (avec la valeur 1 ou 2) pour le limiter.

L'élément possède déjà l'étiquette « voyage ». Vous pouvez ajouter une nouvelle étiquette.

Afficher le message

<mdui-snackbar message-line="1" class="example-line">L'élément possède déjà l'étiquette « voyage ». Vous pouvez ajouter une nouvelle étiquette.</mdui-snackbar>

<mdui-button>Afficher le message</mdui-button>

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

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

Source

Fermeture automatique

Utilisez auto-close-delay (en millisecondes) pour définir le délai avant la fermeture automatique. Valeur par défaut : 5000 ms.

Photo archivée

Afficher le message

<mdui-snackbar auto-close-delay="2000" class="example-close-delay">Photo archivée</mdui-snackbar>

<mdui-button>Afficher le message</mdui-button>

<script>
  const snackbar = document.querySelector(".example-close-delay");
  const openButton = snackbar.nextElementSibling;

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

Source

Fermer en cliquant à l'extérieur

Ajoutez close-on-outside-click pour fermer le snackbar en cliquant à l'extérieur de celui-ci.

Photo archivée

Afficher le message

<mdui-snackbar close-on-outside-click class="example-outside">Photo archivée</mdui-snackbar>

<mdui-button>Afficher le message</mdui-button>

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

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

Source

API

Propriétés

Attribut HTML	Propriété JavaScript	Type	Défaut
`open`	`open`	`boolean`	`false`
Si la snackbar est affichée
`placement`	`placement`	`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end'`	`'bottom'`
Position d'affichage de la snackbar. Par défaut `bottom`. Les valeurs possibles incluent : `top` : En haut, centré `top-start` : En haut, aligné à gauche `top-end` : En haut, aligné à droite `bottom` : En bas, centré `bottom-start` : En bas, aligné à gauche `bottom-end` : En bas, aligné à droite
`action`	`action`	`string`	-
Texte du bouton d'action. Peut également être défini via `slot="action"` pour définir le bouton d'action.
`action-loading`	`actionLoading`	`boolean`	`false`
Si le bouton d'action est en état de chargement
`closeable`	`closeable`	`boolean`	`false`
Si un bouton de fermeture doit être affiché à droite
`close-icon`	`closeIcon`	`string`	-
Nom de l'icône Material Icons pour le bouton de fermeture. Peut également être défini via `slot="close-icon"`.
`message-line`	`messageLine`	`1 \| 2`	-
Nombre maximal de lignes pour le texte du message. Par défaut, aucune limite. Les valeurs possibles incluent : `1` : Affiche au maximum une ligne `2` : Affiche au maximum deux lignes
`auto-close-delay`	`autoCloseDelay`	`number`	`5000`
Délai de fermeture automatique (en millisecondes). Définissez sur `0` pour désactiver la fermeture automatique. La valeur par défaut est de 5000 millisecondes.
`close-on-outside-click`	`closeOnOutsideClick`	`boolean`	`false`
Si un clic ou un toucher en dehors de la snackbar doit la fermer

Événements

Nom
`open`
Se déclenche lorsque la snackbar commence à s'afficher. Vous pouvez empêcher l'affichage de la snackbar en appelant `event.preventDefault()`.
`opened`
Se déclenche lorsque l'animation d'affichage de la snackbar est terminée.
`close`
Se déclenche lorsque la snackbar commence à se masquer. Vous pouvez empêcher la fermeture de la snackbar en appelant `event.preventDefault()`.
`closed`
Se déclenche lorsque l'animation de masquage de la snackbar est terminée.
`action-click`
Se déclenche lors du clic sur le bouton d'action

Slots

Nom
Défaut
Contenu textuel du message de la snackbar
`action`
Bouton d'action à droite
`close-button`
Bouton de fermeture à droite. Doit avoir l'attribut `closeable` défini sur `true` pour être affiché.
`close-icon`
Icône dans le bouton de fermeture

CSS Parts

Nom
`message`
Texte du message
`action`
Bouton d'action
`close-button`
Bouton de fermeture
`close-icon`
Icône dans le bouton de fermeture

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

Slider

Chapitre suivant

Switch