snackbar

A snackbar függvény a <mdui-snackbar> komponenshez tartozó kényelmi függvény. A függvény használatával nem kell megírnia a komponens HTML kódját, és máris megnyithat egy snackbart.

Használat

A függvény importálása:

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

Példa:

megnyitás

<mdui-button class="example-button">megnyitás</mdui-button>

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

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

  button.addEventListener("click", () => {
    snackbar({
      message: "Fotó archiválva",
      action: "Visszavonás",
      onActionClick: () => console.log("műveleti gombra kattintva")
    });
  });
</script>

API

snackbar(options: Options): Snackbar

A függvény egy Options objektumot vár paraméterként; visszatérési értéke a <mdui-snackbar> komponens példánya.

Options

Attribútum név	Típus	Alapértelmezett érték
`message`	`string`	-
a Snackbar-ban található üzenet szöveges tartalma
`placement`	`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end'`	`bottom`
A Snackbar megjelenési pozíciója. Alapértelmezés: `bottom`. Elérhető értékek: `top`: felül, középre igazítva `top-start`: felül, balra igazítva `top-end`: felül, jobbra igazítva `bottom`: alul, középre igazítva `bottom-start`: alul, balra igazítva `bottom-end`: alul, jobbra igazítva
`action`	`string`	-
a műveleti gomb szövege
`closeable`	`boolean`	`false`
megjelenjen-e a jobb oldalon a bezárás gomb
`messageLine`	`1 \| 2`	-
Az üzenet szövege legfeljebb hány sorban jelenjen meg. Alapértelmezés szerint nincs sorkorlátozás. Elérhető értékek: `1`: az üzenet szövege legfeljebb egy sorban jelenjen meg `2`: az üzenet szövege legfeljebb két sorban jelenjen meg
`autoCloseDelay`	`number`	`5000`
mennyi idő múlva záródjon be automatikusan (ezredmásodpercben). Ha 0, nem záródik be automatikusan. Alapértelmezés szerint 5 másodperc után záródik be.
`closeOnOutsideClick`	`boolean`	`false`
a Snackbar-on kívüli területre kattintva bezáródik-e a Snackbar
`queue`	`string`	-
Várólista neve. Alapértelmezés szerint nincs várólista, a függvény többszöri meghívásakor egyszerre több snackbar jelenik meg. Ebben a paraméterben megadhat egy várólista nevet. Az azonos várólistanéven futó snackbar függvények csak az előző snackbar bezárása után nyitják meg a következőt.
`onClick`	`(snackbar: Snackbar) => void`	-
A Snackbar-ra kattintáskor meghívódó visszahívási függvény. A függvény paramétere a snackbar példány, a `this` is a snackbar példányra mutat.
`onActionClick`	`(snackbar: Snackbar) => void \| boolean \| Promise<void>`	-
A műveleti gombra kattintáskor meghívódó visszahívási függvény. A függvény paramétere a snackbar példány, a `this` is a snackbar példányra mutat. Alapértelmezés szerint a kattintás után bezáródik a snackbar; ha a visszatérési érték `false`, akkor nem záródik be; ha a visszatérési érték egy promise, akkor a promise feloldódása után záródik be.
`onOpen`	`(snackbar: Snackbar) => void`	-
A Snackbar megjelenésének kezdetekor meghívódó visszahívási függvény. A függvény paramétere a snackbar példány, a `this` is a snackbar példányra mutat.
`onOpened`	`(snackbar: Snackbar) => void`	-
A Snackbar megjelenési animációjának befejezésekor meghívódó visszahívási függvény. A függvény paramétere a snackbar példány, a `this` is a snackbar példányra mutat.
`onClose`	`(snackbar: Snackbar) => void`	-
A Snackbar elrejtésének kezdetekor meghívódó visszahívási függvény. A függvény paramétere a snackbar példány, a `this` is a snackbar példányra mutat.
`onClosed`	`(snackbar: Snackbar) => void`	-
A Snackbar elrejtési animációjának befejezésekor meghívódó visszahívási függvény. A függvény paramétere a snackbar példány, a `this` is a snackbar példányra mutat.

Előző fejezet

prompt

Következő fejezet

getTheme