È disponibile il nuovo mdui 2 basato su Material Design 3 e Web Components, vai alla documentazione di mdui 2.

Snackbar

Snackbar visualizza un piccolo pop-up nella parte inferiore della finestra, che può scomparire automaticamente dopo un timeout o quando l'utente fa clic o tocca altrove sullo schermo.

È possibile visualizzare solo una Snackbar alla volta sullo schermo. Se ne viene aperta un'altra mentre una è ancora aperta, la nuova Snackbar verrà messa in coda e aperta dopo la chiusura di quella corrente.

Modalità d'uso

Basta chiamare il metodo mdui.snackbar(params).

Letture correlate

Linee guida di design Material Design: Componenti - Snackbar e Toast

Utilizzo

Snackbar viene chiamata direttamente tramite JavaScript, non è necessario scrivere un layout HTML.

Esistono due modi per chiamare Snackbar:

mdui.snackbar(message, params)
mdui.snackbar(params)

Entrambi i metodi restituiscono un'istanza di Snackbar.

Parametri supportati da Snackbar:

Nome	Tipo	Predefinito	Descrizione
`message`	`string`		Testo della Snackbar. Quando viene chiamata tramite `mdui.snackbar(params)`, questo parametro non può essere vuoto.
`timeout`	`int`	`4000`	Ritardo per l'auto-chiusura della Snackbar, in millisecondi. Impostare a 0 per non chiuderla automaticamente.
`position`	`string`	`bottom`	Posizione della Snackbar. `bottom`：In basso `top`：In alto `left-top`：Angolo in alto a sinistra `left-bottom`：Angolo in basso a sinistra `right-top`：Angolo in alto a destra `right-bottom`：Angolo in basso a destra
`buttonText`	`string`		Testo del pulsante.
`buttonColor`	`string`	`#90CAF9`	Colore del testo del pulsante, può essere un nome di colore o un valore di colore, come `red`, `#ffffff`, `rgba(255, 255, 255, 0.3)`, ecc.
`closeOnButtonClick`	`boolean`	`true`	Se chiudere la Snackbar quando si fa clic sul pulsante.
`closeOnOutsideClick`	`boolean`	`true`	Se chiudere la Snackbar quando si fa clic o si tocca un'area esterna alla Snackbar.
`onClick`	`function`		Funzione di callback quando si fa clic sulla Snackbar.
`onButtonClick`	`function`		Funzione di callback quando si fa clic sul pulsante della Snackbar.
`onOpen`	`function`		Funzione di callback quando inizia l'apertura della Snackbar.
`onOpened`	`function`		Funzione di callback dopo l'apertura della Snackbar.
`onClose`	`function`		Funzione di callback quando inizia la chiusura della Snackbar.
`onClosed`	`function`		Funzione di callback dopo la chiusura della Snackbar.

Metodi delle istanze Snackbar:

Nome metodo	Descrizione
`close`	Chiude la Snackbar; una volta chiusa, la Snackbar viene distrutta.

Esempio

Snackbar normale

Esempio

mdui.snackbar({
  message: 'Message sent'
});

Snackbar con callback

Esempio

mdui.snackbar({
  message: 'Archived',
  buttonText: 'undo',
  onClick: function(){
    mdui.alert('Hai cliccato sulla Snackbar');
  },
  onButtonClick: function(){
    mdui.alert('Hai cliccato sul pulsante');
  },
  onClose: function(){
    mdui.alert('Chiuso');
  }
});

Snackbar in diverse posizioni

Esempio

mdui.snackbar({
  message: 'bottom',
  position: 'bottom',
});

mdui.snackbar({
  message: 'top',
  position: 'top',
});

mdui.snackbar({
  message: 'left-top',
  position: 'left-top',
});

mdui.snackbar({
  message: 'left-bottom',
  position: 'left-bottom',
});

mdui.snackbar({
  message: 'right-top',
  position: 'right-top',
});

mdui.snackbar({
  message: 'right-bottom',
  position: 'right-bottom',
});

Tooltip

Table