snackbar

Funkcja snackbar jest wygodną nakładką na komponent <mdui-snackbar>. Dzięki niej nie musisz pisać kodu HTML komponentu, aby otworzyć snackbar.

Sposób użycia

Zaimportuj funkcję:

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

Przykład użycia:

otwórz

<mdui-button class="example-button">otwórz</mdui-button>

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

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

  button.addEventListener("click", () => {
    snackbar({
      message: "Zdjęcie zarchiwizowane",
      action: "Cofnij",
      onActionClick: () => console.log("kliknięto przycisk akcji")
    });
  });
</script>

API

snackbar(options: Options): Snackbar

Funkcja przyjmuje obiekt Options jako parametr; zwraca instancję komponentu <mdui-snackbar>.

Options

Nazwa	Typ	Wartość domyślna
`message`	`string`	-
Treść wiadomości w snackbarze
`placement`	`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end'`	`bottom`
Pozycja snackbara. Domyślnie `bottom`. Dostępne wartości: `top` – na górze, wyśrodkowany `top-start` – na górze, wyrównany do lewej `top-end` – na górze, wyrównany do prawej `bottom` – na dole, wyśrodkowany `bottom-start` – na dole, wyrównany do lewej `bottom-end` – na dole, wyrównany do prawej
`action`	`string`	-
Tekst przycisku akcji
`closeable`	`boolean`	`false`
Czy wyświetlać przycisk zamykania po prawej stronie
`messageLine`	`1 \| 2`	-
Maksymalna liczba linii dla wiadomości. Domyślnie brak limitu. Dostępne wartości: `1` – maksymalnie jedna linia `2` – maksymalnie dwie linie
`autoCloseDelay`	`number`	`5000`
Czas (w milisekundach) po jakim snackbar zostanie automatycznie zamknięty. Wartość 0 oznacza brak automatycznego zamykania. Domyślnie 5 sekund.
`closeOnOutsideClick`	`boolean`	`false`
Czy zamknąć snackbar po kliknięciu lub dotknięciu obszaru poza nim
`queue`	`string`	-
Nazwa kolejki. Domyślnie kolejka nie jest włączona. Przy wielokrotnym wywołaniu funkcji wiele snackbarów będzie wyświetlanych jednocześnie. Możesz podać nazwę kolejki. Funkcje snackbar o tej samej nazwie kolejki będą otwierane jedno po drugim – następne zostanie otwarte po zamknięciu poprzedniego.
`onClick`	`(snackbar: Snackbar) => void`	-
Funkcja zwrotna wywoływana po kliknięciu snackbara. Parametr funkcji to instancja snackbara, `this` również wskazuje na instancję snackbara.
`onActionClick`	`(snackbar: Snackbar) => void \| boolean \| Promise<void>`	-
Funkcja zwrotna wywoływana po kliknięciu przycisku akcji. Parametr funkcji to instancja snackbara, `this` również wskazuje na instancję snackbara. Domyślnie po kliknięciu snackbar zostanie zamknięty. Jeśli funkcja zwróci `false`, snackbar nie zostanie zamknięty. Jeśli zwróci Promise, zostanie zamknięty po rozwiązaniu Promise.
`onOpen`	`(snackbar: Snackbar) => void`	-
Funkcja zwrotna wywoływana na początku wyświetlania snackbara. Parametr funkcji to instancja snackbara, `this` również wskazuje na instancję snackbara.
`onOpened`	`(snackbar: Snackbar) => void`	-
Funkcja zwrotna wywoływana po zakończeniu animacji wyświetlania snackbara. Parametr funkcji to instancja snackbara, `this` również wskazuje na instancję snackbara.
`onClose`	`(snackbar: Snackbar) => void`	-
Funkcja zwrotna wywoływana na początku ukrywania snackbara. Parametr funkcji to instancja snackbara, `this` również wskazuje na instancję snackbara.
`onClosed`	`(snackbar: Snackbar) => void`	-
Funkcja zwrotna wywoływana po zakończeniu animacji ukrywania snackbara. Parametr funkcji to instancja snackbara, `this` również wskazuje na instancję snackbara.

Poprzedni rozdział

prompt

Następny rozdział

getTheme