snackbar

Die snackbar-Funktion ist ein Wrapper für die <mdui-snackbar>-Komponente. Mit dieser Funktion können Sie eine Snackbar öffnen, ohne den HTML-Code der Komponente schreiben zu müssen.

Verwendung

Importieren Sie die Funktion nach Bedarf:

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

Beispiel:

öffnen

<mdui-button class="example-button">öffnen</mdui-button>

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

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

  button.addEventListener("click", () => {
    snackbar({
      message: "Foto archiviert",
      action: "Rückgängig",
      onActionClick: () => console.log("Aktionsbutton geklickt")
    });
  });
</script>

API

snackbar(options: Options): Snackbar

Die Funktion akzeptiert ein Options-Objekt als Argument. Der Rückgabewert ist eine Instanz der <mdui-snackbar>-Komponente.

Options

Attributname	Typ	Standardwert
`message`	`string`	-
Textinhalt der Nachricht in der Snackbar
`placement`	`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end'`	`bottom`
Position, an der die Snackbar erscheint. Standard ist `bottom`. Mögliche Werte: `top`: Oben, zentriert ausgerichtet `top-start`: Oben, linksbündig ausgerichtet `top-end`: Oben, rechtsbündig ausgerichtet `bottom`: Unten, zentriert ausgerichtet `bottom-start`: Unten, linksbündig ausgerichtet `bottom-end`: Unten, rechtsbündig ausgerichtet
`action`	`string`	-
Text des Aktionsbuttons
`closeable`	`boolean`	`false`
Ob rechts eine Schaltfläche zum Schließen angezeigt werden soll
`messageLine`	`1 \| 2`	-
Maximale Anzahl der Textzeilen für die Nachricht. Standardmäßig keine Begrenzung. Mögliche Werte: `1`: Maximal eine Zeile `2`: Maximal zwei Zeilen
`autoCloseDelay`	`number`	`5000`
Verzögerung in Millisekunden, nach der die Snackbar automatisch geschlossen wird. Bei 0 kein automatisches Schließen. Standard ist Schließen nach 5 Sekunden.
`closeOnOutsideClick`	`boolean`	`false`
Ob die Snackbar geschlossen werden soll, wenn auf einen Bereich außerhalb der Snackbar geklickt oder getippt wird
`queue`	`string`	-
Name der Warteschlange. Standardmäßig ist die Warteschlange deaktiviert. Bei mehrfachem Aufruf der Funktion werden mehrere Snackbars gleichzeitig angezeigt. Sie können hier einen Warteschlangennamen angeben. Snackbar-Funktionen mit demselben Warteschlangennamen öffnen die nächste Snackbar erst, nachdem die vorherige geschlossen wurde.
`onClick`	`(snackbar: Snackbar) => void`	-
Wird aufgerufen, wenn auf die Snackbar geklickt wird. Der Funktionsparameter ist die Snackbar-Instanz, `this` zeigt ebenfalls auf die Snackbar-Instanz.
`onActionClick`	`(snackbar: Snackbar) => void \| boolean \| Promise<void>`	-
Wird aufgerufen, wenn auf den Aktionsbutton geklickt wird. Der Funktionsparameter ist die Snackbar-Instanz, `this` zeigt ebenfalls auf die Snackbar-Instanz. Standardmäßig wird die Snackbar nach dem Klicken geschlossen. Wenn der Rückgabewert `false` ist, wird die Snackbar nicht geschlossen. Wenn der Rückgabewert ein Promise ist, wird die Snackbar geschlossen, nachdem das Promise aufgelöst wurde.
`onOpen`	`(snackbar: Snackbar) => void`	-
Wird aufgerufen, wenn die Snackbar eingeblendet wird. Der Funktionsparameter ist die Snackbar-Instanz, `this` zeigt ebenfalls auf die Snackbar-Instanz.
`onOpened`	`(snackbar: Snackbar) => void`	-
Wird aufgerufen, sobald die Erscheinungsanimation der Snackbar abgeschlossen ist. Der Funktionsparameter ist die Snackbar-Instanz, `this` zeigt ebenfalls auf die Snackbar-Instanz.
`onClose`	`(snackbar: Snackbar) => void`	-
Wird aufgerufen, wenn die Snackbar ausgeblendet wird. Der Funktionsparameter ist die Snackbar-Instanz, `this` zeigt ebenfalls auf die Snackbar-Instanz.
`onClosed`	`(snackbar: Snackbar) => void`	-
Wird aufgerufen, sobald die Ausblendanimation der Snackbar abgeschlossen ist. Der Funktionsparameter ist die Snackbar-Instanz, `this` zeigt ebenfalls auf die Snackbar-Instanz.

Vorherige Seite

prompt

Nächste Seite

getTheme