Snackbar
Eine Snackbar zeigt eine kleine Popup-Box am unteren Rand des Fensters an, die nach einer Zeitüberschreitung oder wenn der Benutzer auf den Bildschirm klickt oder tippt, automatisch verschwindet.
Es kann jeweils nur eine Snackbar gleichzeitig auf dem Bildschirm angezeigt werden. Wenn eine weitere Snackbar geöffnet wird, während die aktuelle noch nicht geschlossen ist, wird die nächste Snackbar in eine Warteschlange eingereiht und erst geöffnet, nachdem die aktuelle geschlossen wurde.
Verwendung
Rufen Sie einfach die Methode mdui.snackbar(params) auf.
Verwandte Themen
Material Design-Richtlinien: Komponenten - Snackbar und Toast
Verwendung
Die Snackbar wird direkt über JavaScript aufgerufen, es ist kein HTML-Layout erforderlich.
Es gibt zwei Möglichkeiten, eine Snackbar aufzurufen:
mdui.snackbar(message, params)mdui.snackbar(params)
Beide Methoden geben eine Instanz der Snackbar zurück.
Unterstützte Parameter für Snackbar:
| Parametername | Typ | Standardwert | Beschreibung |
|---|---|---|---|
message | string | Der Text der Snackbar. Bei Aufruf über mdui.snackbar(params) darf dieser Parameter nicht leer sein. | |
timeout | int | 4000 | Verzögerungszeit für das automatische Ausblenden der Snackbar in Millisekunden. Wenn auf 0 gesetzt, wird sie nicht automatisch geschlossen. |
position | string | bottom | Die Position der Snackbar.
|
buttonText | string | Der Text des Buttons. | |
buttonColor | string | #90CAF9 | Die Textfarbe des Buttons, kann ein Farbname oder ein Farbwert sein, wie z.B. red, #ffffff, rgba(255, 255, 255, 0.3) usw. |
closeOnButtonClick | boolean | true | Ob die Snackbar geschlossen wird, wenn auf den Button geklickt wird. |
closeOnOutsideClick | boolean | true | Ob die Snackbar geschlossen wird, wenn auf einen Bereich außerhalb der Snackbar geklickt oder getippt wird. |
onClick | function | Callback-Funktion beim Klicken auf die Snackbar. | |
onButtonClick | function | Callback-Funktion beim Klicken auf den Button der Snackbar. | |
onOpen | function | Callback-Funktion beim Starten des Öffnens der Snackbar. | |
onOpened | function | Callback-Funktion nach dem Öffnen der Snackbar. | |
onClose | function | Callback-Funktion beim Starten des Schließens der Snackbar. | |
onClosed | function | Callback-Funktion nach dem Schließen der Snackbar. |
Verfügbare Methoden der Snackbar-Instanz:
| Methodenname | Beschreibung |
|---|---|
close | Schließt die Snackbar. Nach dem Schließen wird die Snackbar zerstört. |
Snackbar mit Callback
mdui.snackbar({
message: 'Archived',
buttonText: 'undo',
onClick: function(){
mdui.alert('Snackbar wurde geklickt');
},
onButtonClick: function(){
mdui.alert('Button wurde geklickt');
},
onClose: function(){
mdui.alert('Geschlossen');
}
});Snackbar an verschiedenen Positionen
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',
});