snackbar

Funkce snackbar je rozšířením komponenty <mdui-snackbar>. Díky tomu nemusíte pro otevření Snackbaru ručně psát HTML.

Způsob použití

Importujte funkci podle potřeby:

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

Příklad použití:

otevřít

<mdui-button class="example-button">otevřít</mdui-button>

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

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

  button.addEventListener("click", () => {
    snackbar({
      message: "Foto archivováno",
      action: "Zpět",
      onActionClick: () => console.log("kliknuto na akční tlačítko")
    });
  });
</script>

API

snackbar(options: Options): Snackbar

Funkce přijímá jako parametr objekt Options a vrací instanci komponenty <mdui-snackbar>.

Options

Název vlastnosti	Typ	Výchozí hodnota
`message`	`string`	-
Text zprávy v Snackbaru
`placement`	`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end'`	`bottom`
Umístění Snackbaru. Výchozí je `bottom`. Možné hodnoty: `top`: nahoře, zarovnáno na střed `top-start`: nahoře, zarovnáno vlevo `top-end`: nahoře, zarovnáno vpravo `bottom`: dole, zarovnáno na střed `bottom-start`: dole, zarovnáno vlevo `bottom-end`: dole, zarovnáno vpravo
`action`	`string`	-
Text akčního tlačítka
`closeable`	`boolean`	`false`
Zda zobrazit tlačítko zavření na pravé straně
`messageLine`	`1 \| 2`	-
Maximální počet řádků textu zprávy. Výchozí je bez omezení. Možné hodnoty: `1`: maximálně jeden řádek `2`: maximálně dva řádky
`autoCloseDelay`	`number`	`5000`
Doba po které se Snackbar automaticky zavře (v milisekundách). Nastavením na 0 se automatické zavření vypne. Výchozí je zavření po 5 sekundách.
`closeOnOutsideClick`	`boolean`	`false`
Zda zavřít Snackbar při kliknutí nebo dotyku na oblast mimo Snackbar
`queue`	`string`	-
Název fronty. Ve výchozím nastavení není fronta zapnutá. Při opakovaném volání této funkce se zobrazí více snackbarů současně. Zadáním názvu fronty zajistíte, že se snackbary se stejným názvem otevřou až po zavření předchozího snackbaru.
`onClick`	`(snackbar: Snackbar) => void`	-
Funkce zpětného volání při kliknutí na Snackbar. Parametrem funkce je instance snackbaru, `this` také odkazuje na instanci snackbaru.
`onActionClick`	`(snackbar: Snackbar) => void \| boolean \| Promise<void>`	-
Funkce zpětného volání při kliknutí na akční tlačítko. Parametrem funkce je instance snackbaru, `this` také odkazuje na instanci snackbaru. Ve výchozím nastavení se po kliknutí snackbar zavře; pokud je návratová hodnota `false`, snackbar se nezavře; pokud je návratová hodnota promise, snackbar se zavře po vyřešení (resolve) tohoto promise.
`onOpen`	`(snackbar: Snackbar) => void`	-
Funkce zpětného volání při zahájení zobrazování Snackbaru. Parametrem funkce je instance snackbaru, `this` také odkazuje na instanci snackbaru.
`onOpened`	`(snackbar: Snackbar) => void`	-
Funkce zpětného volání po dokončení animace zobrazení Snackbaru. Parametrem funkce je instance snackbaru, `this` také odkazuje na instanci snackbaru.
`onClose`	`(snackbar: Snackbar) => void`	-
Funkce zpětného volání při zahájení skrývání Snackbaru. Parametrem funkce je instance snackbaru, `this` také odkazuje na instanci snackbaru.
`onClosed`	`(snackbar: Snackbar) => void`	-
Funkce zpětného volání po dokončení animace skrytí Snackbaru. Parametrem funkce je instance snackbaru, `this` také odkazuje na instanci snackbaru.

Předchozí kapitola

prompt

Další kapitola

getTheme