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

Snackbar

Snackbar s’affiche en bas de la fenêtre sous forme de petite boîte contextuelle, et disparaît automatiquement après un délai ou lorsque l’utilisateur clique ou touche ailleurs à l’écran.

Un seul Snackbar peut être affiché à la fois à l’écran. Si un nouveau Snackbar est ouvert alors que le précédent n’est pas encore fermé, le nouveau sera mis en file d’attente et s’affichera une fois que le précédent aura disparu.

Utilisation

Appelez la méthode mdui.snackbar(params).

Lecture associée

Spécifications Material Design : composant - Snackbar et Toast

Méthode d’utilisation

Snackbar est appelé directement par JavaScript, sans avoir à écrire de structure HTML.

Il existe deux manières d’appeler Snackbar :

mdui.snackbar(message, params)
mdui.snackbar(params)

Les deux méthodes renvoient une instance de Snackbar.

Paramètres pris en charge par Snackbar :

Nom	Type	Défaut	Description
`message`	`string`		Le texte du Snackbar. Lorsqu’il est appelé via `mdui.snackbar(params)`, ce paramètre ne peut pas être vide.
`timeout`	`int`	`4000`	Délai d’autocachage du Snackbar, en millisecondes. Définissez à 0 pour ne pas le fermer automatiquement.
`position`	`string`	`bottom`	Position du Snackbar. `bottom` : en bas `top` : en haut `left-top` : en haut à gauche `left-bottom` : en bas à gauche `right-top` : en haut à droite `right-bottom` : en bas à droite
`buttonText`	`string`		Texte du bouton.
`buttonColor`	`string`	`#90CAF9`	Couleur du texte du bouton, qui peut être un nom de couleur ou une valeur de couleur, telle que `red`, `#ffffff`, `rgba(255, 255, 255, 0.3)`, etc.
`closeOnButtonClick`	`boolean`	`true`	Indique si le Snackbar doit se fermer lorsqu’on clique sur le bouton.
`closeOnOutsideClick`	`boolean`	`true`	Indique si le Snackbar doit se fermer lorsqu’on clique ou touche à l’extérieur de la zone du Snackbar.
`onClick`	`function`		Fonction de rappel appelée lors du clic sur le Snackbar.
`onButtonClick`	`function`		Fonction de rappel appelée lorsque le bouton du Snackbar est cliqué.
`onOpen`	`function`		Fonction de rappel appelée au début de l’ouverture du Snackbar.
`onOpened`	`function`		Fonction de rappel appelée après l’ouverture du Snackbar.
`onClose`	`function`		Fonction de rappel appelée au début de la fermeture du Snackbar.
`onClosed`	`function`		Fonction de rappel appelée après la fermeture du Snackbar.

Méthodes disponibles sur l’instance Snackbar :

Nom de méthode	Description
`close`	Ferme le Snackbar ; une fois fermé, il est détruit.

Exemples

Snackbar standard

Exemple

mdui.snackbar({
  message: 'Message sent'
});

Snackbar avec rappel

Exemple

mdui.snackbar({
  message: 'Archived',
  buttonText: 'undo',
  onClick: function(){
    mdui.alert('Snackbar cliqué');
  },
  onButtonClick: function(){
    mdui.alert('Bouton cliqué');
  },
  onClose: function(){
    mdui.alert('Fermé');
  }
});

Snackbar à différentes positions

Exemple

mdui.snackbar({
  message: 'bottom',
  position: 'bottom',
});

mdui.snackbar({
  message: 'top',
  position: 'top',
});

mdui.snackbar({
  message: 'left-top',
  position: 'left-top',
});

mdui.snackbar({
  message: 'left-bottom',
  position: 'left-bottom',
});

mdui.snackbar({
  message: 'right-top',
  position: 'right-top',
});

mdui.snackbar({
  message: 'right-bottom',
  position: 'right-bottom',
});

Infobulle

Tableau