snackbar

La fonction snackbar s'appuie sur le composant <mdui-snackbar>. Elle permet d'ouvrir un snackbar sans avoir à écrire le code HTML du composant.

Utilisation

Importez la fonction selon vos besoins :

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

Exemple d'utilisation :

ouvrir

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

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

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

  button.addEventListener("click", () => {
    snackbar({
      message: "Photo archivée",
      action: "Annuler",
      onActionClick: () => console.log("clic sur le bouton d'action")
    });
  });
</script>

API

snackbar(options: Options): Snackbar

La fonction prend un objet Options en paramètre et retourne l'instance du composant <mdui-snackbar>.

Options

Nom de la propriété	Type	Valeur par défaut
`message`	`string`	-
Texte du message dans Snackbar
`placement`	`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end'`	`bottom`
Position où Snackbar apparaît. Par défaut `bottom`. Valeurs disponibles : `top` : situé en haut, centré `top-start` : situé en haut, aligné à gauche `top-end` : situé en haut, aligné à droite `bottom` : situé en bas, centré `bottom-start` : situé en bas, aligné à gauche `bottom-end` : situé en bas, aligné à droite
`action`	`string`	-
Texte du bouton d'action
`closeable`	`boolean`	`false`
Indique s'il faut afficher un bouton de fermeture sur le côté droit
`messageLine`	`1 \| 2`	-
Nombre maximal de lignes pour afficher le texte du message. Par défaut, aucune limite. Valeurs disponibles : `1` : le texte du message affiche un maximum d'une ligne `2` : le texte du message affiche un maximum de deux lignes
`autoCloseDelay`	`number`	`5000`
Fermer automatiquement après combien de temps (en millisecondes). Lorsque défini sur 0, il ne se ferme pas automatiquement. Par défaut, il se ferme automatiquement après 5 secondes.
`closeOnOutsideClick`	`boolean`	`false`
Indique s'il faut fermer Snackbar en cliquant ou en touchant l'extérieur de Snackbar
`queue`	`string`	-
Nom de la file d'attente. Par défaut, la file d'attente n'est pas activée. Lorsque la fonction est appelée plusieurs fois, plusieurs snackbars s'affichent simultanément. Vous pouvez passer un nom de file d'attente dans ce paramètre. Les fonctions snackbar portant le même nom de file d'attente s'ouvriront une fois que le snackbar précédent sera fermé.
`onClick`	`(snackbar: Snackbar) => void`	-
Fonction de rappel lors du clic sur Snackbar. Le paramètre de la fonction est l'instance snackbar, et `this` pointe également vers l'instance snackbar.
`onActionClick`	`(snackbar: Snackbar) => void \| boolean \| Promise<void>`	-
Fonction de rappel lors du clic sur le bouton d'action. Le paramètre de la fonction est l'instance snackbar, et `this` pointe également vers l'instance snackbar. Par défaut, le snackbar se ferme après un clic. Si la valeur retournée est `false`, le snackbar ne se ferme pas. Si la valeur retournée est une promise, le snackbar se ferme une fois la promise résolue.
`onOpen`	`(snackbar: Snackbar) => void`	-
Fonction de rappel au début de l'affichage de Snackbar. Le paramètre de la fonction est l'instance snackbar, et `this` pointe également vers l'instance snackbar.
`onOpened`	`(snackbar: Snackbar) => void`	-
Fonction de rappel une fois l'animation d'affichage de Snackbar terminée. Le paramètre de la fonction est l'instance snackbar, et `this` pointe également vers l'instance snackbar.
`onClose`	`(snackbar: Snackbar) => void`	-
Fonction de rappel au début du masquage de Snackbar. Le paramètre de la fonction est l'instance snackbar, et `this` pointe également vers l'instance snackbar.
`onClosed`	`(snackbar: Snackbar) => void`	-
Fonction de rappel une fois l'animation de masquage de Snackbar terminée. Le paramètre de la fonction est l'instance snackbar, et `this` pointe également vers l'instance snackbar.

Chapitre précédent

prompt

Chapitre suivant

getTheme