snackbar

La funzione snackbar fornisce un modo semplice per utilizzare il componente <mdui-snackbar> senza scrivere HTML.

Utilizzo

Importa la funzione:

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

Esempio:

apri

<mdui-button class="example-button">apri</mdui-button>

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

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

  button.addEventListener("click", () => {
    snackbar({
      message: "Immagine archiviata",
      action: "Annulla",
      onActionClick: () => console.log("clic pulsante azione")
    });
  });
</script>

API

snackbar(options: Options): Snackbar

La funzione snackbar accetta un oggetto Options come parametro e restituisce un'istanza del componente <mdui-snackbar>.

Options

Proprietà	Tipo	Predefinito
`message`	`string`	-
Il testo da visualizzare nello snackbar.
`placement`	`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end'`	`bottom`
La posizione dello snackbar. Il valore predefinito è `bottom`. Le opzioni includono: `top`: In alto, centrato. `top-start`: In alto, allineato a sinistra. `top-end`: In alto, allineato a destra. `bottom`: In basso, centrato. `bottom-start`: In basso, allineato a sinistra. `bottom-end`: In basso, allineato a destra.
`action`	`string`	-
Il testo per il pulsante di azione.
`closeable`	`boolean`	`false`
Indica se viene mostrato un pulsante di chiusura sul lato destro.
`messageLine`	`1 \| 2`	-
Imposta il numero massimo di righe per il testo del messaggio. Il valore predefinito è illimitato. Le opzioni includono: `1`: Una riga. `2`: Due righe.
`autoCloseDelay`	`number`	`5000`
Il ritardo in millisecondi prima che lo snackbar si chiuda automaticamente. Impostare su `0` per disabilitare la chiusura automatica. Il valore predefinito è `5000` millisecondi (5 secondi).
`closeOnOutsideClick`	`boolean`	`false`
Indica se lo snackbar deve chiudersi al clic o al tocco all'esterno.
`queue`	`string`	-
Il nome della coda. Per impostazione predefinita, la coda non è abilitata. Se questa funzione viene chiamata più volte, verranno visualizzati più snackbar contemporaneamente. Se viene fornito un nome di coda, gli snackbar con lo stesso nome di coda si apriranno in sequenza, ciascuno dopo la chiusura del precedente.
`onClick`	`(snackbar: Snackbar) => void`	-
Callback invocato quando si fa clic sullo snackbar. L'istanza dello snackbar viene passata come parametro ed è anche il contesto di `this`.
`onActionClick`	`(snackbar: Snackbar) => void \| boolean \| Promise<void>`	-
Callback invocato quando si fa clic sul pulsante di azione. L'istanza dello snackbar viene passata come parametro ed è anche il contesto di `this`. Per impostazione predefinita, lo snackbar si chiude quando si fa clic sul pulsante di azione. Restituisci `false` per evitarlo. Se viene restituita una promise, lo snackbar si chiude una volta che la promise si risolve.
`onOpen`	`(snackbar: Snackbar) => void`	-
Callback invocato quando lo snackbar inizia ad aprirsi. L'istanza dello snackbar viene passata come parametro ed è anche il contesto di `this`.
`onOpened`	`(snackbar: Snackbar) => void`	-
Callback invocato quando l'animazione di apertura dello snackbar è completata. L'istanza dello snackbar viene passata come parametro ed è anche il contesto di `this`.
`onClose`	`(snackbar: Snackbar) => void`	-
Callback invocato quando lo snackbar inizia a chiudersi. L'istanza dello snackbar viene passata come parametro ed è anche il contesto di `this`.
`onClosed`	`(snackbar: Snackbar) => void`	-
Callback invocato quando l'animazione di chiusura dello snackbar è completata. L'istanza dello snackbar viene passata come parametro ed è anche il contesto di `this`.

Capitolo precedente

prompt

Capitolo successivo

getTheme