Snackbar
Die Snackbar-Komponente zeigt kurze Status- und Fortschrittsmeldungen auf der Seite an.
Zusätzlich zur direkten Verwendung dieser Komponente bietet mdui eine Funktion mdui.snackbar an, um die Verwendung der Snackbar-Komponente zu vereinfachen.
Importieren Sie die Komponente nach Bedarf:
import 'mdui/components/snackbar.js';
Importieren Sie den TypeScript-Typ der Komponente nach Bedarf:
import type { Snackbar } from 'mdui/components/snackbar.js';
Beispiel:
Foto archiviert
Snackbar öffnen
<mdui-snackbar class="example-snackbar">Foto archiviert</mdui-snackbar>
<mdui-button>Snackbar öffnen</mdui-button>
<script>
const snackbar = document.querySelector(".example-snackbar");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Über das Attribut placement können Sie die Anzeigeposition der Snackbar festlegen.
Foto archiviert
top-start
Foto archiviert
top
Foto archiviert
top-end
Foto archiviert
bottom-start
Foto archiviert
bottom
Foto archiviert
bottom-end
<div class="example-placement">
<div class="row">
<mdui-snackbar placement="top-start">Foto archiviert</mdui-snackbar>
<mdui-button variant="outlined">top-start</mdui-button>
<mdui-snackbar placement="top">Foto archiviert</mdui-snackbar>
<mdui-button variant="outlined">top</mdui-button>
<mdui-snackbar placement="top-end">Foto archiviert</mdui-snackbar>
<mdui-button variant="outlined">top-end</mdui-button>
</div>
<div class="row">
<mdui-snackbar placement="bottom-start">Foto archiviert</mdui-snackbar>
<mdui-button variant="outlined">bottom-start</mdui-button>
<mdui-snackbar placement="bottom">Foto archiviert</mdui-snackbar>
<mdui-button variant="outlined">bottom</mdui-button>
<mdui-snackbar placement="bottom-end">Foto archiviert</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>
Quellcode
Mit dem Attribut action fügen Sie rechts in der Snackbar einen Aktionsbutton hinzu. Den Text des Buttons geben Sie über dieses Attribut an. Ein Klick auf den Aktionsbutton löst das Ereignis action-click aus. Wenn der Aktionsbutton einen Ladezustand anzeigen soll, fügen Sie das Attribut action-loading hinzu.
Foto archiviert
Snackbar öffnen
<mdui-snackbar action="Rückgängig" class="example-action">Foto archiviert</mdui-snackbar>
<mdui-button>Snackbar öffnen</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>
QuellcodeSie können auch über den Slot action ein benutzerdefiniertes Element rechts in der Snackbar hinzufügen.
Foto archiviert
Rückgängig
Snackbar öffnen
<mdui-snackbar class="example-action-slot">
Foto archiviert
<mdui-button slot="action" variant="text">Rückgängig</mdui-button>
</mdui-snackbar>
<mdui-button>Snackbar öffnen</mdui-button>
<script>
const snackbar = document.querySelector(".example-action-slot");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Quellcode
Nach dem Hinzufügen des Attributs closeable erscheint rechts in der Snackbar eine Schaltfläche zum Schließen. Ein Klick auf diese Schaltfläche schließt die Snackbar und löst das Ereignis close aus.
Foto archiviert
Snackbar öffnen
<mdui-snackbar closeable class="example-closeable">Foto archiviert</mdui-snackbar>
<mdui-button>Snackbar öffnen</mdui-button>
<script>
const snackbar = document.querySelector(".example-closeable");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
QuellcodeSie können das Element der Schaltfläche zum Schließen über den Slot close-button anpassen.
Foto archiviert
Snackbar öffnen
<mdui-snackbar closeable class="example-close-button-slot">
Foto archiviert
<mdui-avatar slot="close-button" icon="people_alt"></mdui-avatar>
</mdui-snackbar>
<mdui-button>Snackbar öffnen</mdui-button>
<script>
const snackbar = document.querySelector(".example-close-button-slot");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
QuellcodeÜber das Attribut close-icon können Sie das Material Icons-Symbol in der standardmäßigen Schaltfläche zum Schließen ändern. Sie können das Symbolelement auch über den Slot close-icon anpassen.
Foto archiviert
Snackbar öffnen
<mdui-snackbar
closeable
close-icon="delete"
class="example-close-icon"
>Foto archiviert</mdui-snackbar>
<mdui-button>Snackbar öffnen</mdui-button>
<script>
const snackbar = document.querySelector(".example-close-icon");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Quellcode
Standardmäßig gibt es keine Beschränkung der Textzeilen für die Nachricht. Sie können die maximale Anzahl der Textzeilen mit dem Attribut message-line auf maximal 2 Zeilen begrenzen.
Der Artikel hat bereits das Label "Reisen". Sie können ein neues Label hinzufügen. Sie können ein neues Label hinzufügen.
Snackbar öffnen
<mdui-snackbar message-line="1" class="example-line">Der Artikel hat bereits das Label "Reisen". Sie können ein neues Label hinzufügen. Sie können ein neues Label hinzufügen.</mdui-snackbar>
<mdui-button>Snackbar öffnen</mdui-button>
<script>
const snackbar = document.querySelector(".example-line");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Quellcode
Sie können die Verzögerung für das automatische Schließen mit dem Attribut auto-close-delay in Millisekunden festlegen. Der Standardwert ist 5000 Millisekunden.
Foto archiviert
Snackbar öffnen
<mdui-snackbar auto-close-delay="2000" class="example-close-delay">Foto archiviert</mdui-snackbar>
<mdui-button>Snackbar öffnen</mdui-button>
<script>
const snackbar = document.querySelector(".example-close-delay");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Quellcode
Fügen Sie das Attribut close-on-outside-click hinzu, um die Snackbar zu schließen, wenn Sie auf einen Bereich außerhalb der Snackbar klicken.
Foto archiviert
Snackbar öffnen
<mdui-snackbar close-on-outside-click class="example-outside">Foto archiviert</mdui-snackbar>
<mdui-button>Snackbar öffnen</mdui-button>
<script>
const snackbar = document.querySelector(".example-outside");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Quellcode| Attribut | Property | Reflect | Typ | Standard |
|---|
open | open | | boolean | false |
Öffnet die Snackbar.
|
placement | placement | | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'bottom' |
Position der Snackbar. Standard ist bottom. Mögliche Werte:
top: Oben zentriert.top-start: Oben links.top-end: Oben rechts.bottom: Unten zentriert.bottom-start: Unten links.bottom-end: Unten rechts.
|
action | action | | string | - |
Text für die Aktionsschaltfläche. Alternativ können Sie slot="action" verwenden.
|
action-loading | actionLoading | | boolean | false |
Gibt an, ob sich die Aktionsschaltfläche in einem Ladezustand befindet.
|
closeable | closeable | | boolean | false |
Zeigt rechts einen Schließen-Button an.
|
close-icon | closeIcon | | string | - |
Name des Material Icons für den Schließen-Button. Alternativ können Sie slot="close-icon" verwenden.
|
message-line | messageLine | | 1 | 2 | - |
Maximale Zeilen für den Nachrichtentext. Standard ist unbegrenzt. Mögliche Werte:
1: Einzeilig.2: Zweizeilig.
|
auto-close-delay | autoCloseDelay | | number | 5000 |
Schließt die Snackbar automatisch nach der angegebenen Verzögerung (in Millisekunden). Setzen Sie 0, um das automatische Schließen zu deaktivieren. Standard ist 5000.
|
close-on-outside-click | closeOnOutsideClick | | boolean | false |
Schließt die Snackbar, wenn der Benutzer außerhalb klickt oder tippt.
|
| Name |
|---|
open |
Wird ausgelöst, wenn die Snackbar beginnt, sich zu öffnen. Kann mit event.preventDefault() verhindert werden.
|
opened |
Wird ausgelöst, nachdem die Snackbar geöffnet wurde und die Animationen abgeschlossen sind.
|
close |
Wird ausgelöst, wenn die Snackbar beginnt, sich zu schließen. Kann mit event.preventDefault() verhindert werden.
|
closed |
Wird ausgelöst, nachdem die Snackbar geschlossen wurde und die Animationen abgeschlossen sind.
|
action-click |
Wird ausgelöst, wenn die Aktionsschaltfläche angeklickt wird.
|
| Name |
|---|
| Standard |
Snackbar-Nachricht.
|
action |
Rechte Aktionsschaltfläche.
|
close-button |
Rechter Schließen-Button. Wird angezeigt, wenn closeable gesetzt ist.
|
close-icon |
Icon im rechten Schließen-Button.
|
| Name |
|---|
--shape-corner |
Der Eckradius der Komponente. Sie können einen bestimmten Pixelwert verwenden, es wird jedoch empfohlen, auf Design-Tokens zu verweisen.
|
--z-index |
Der CSS z-index-Wert der Komponente.
|
