O novo mdui 2, baseado em Material Design 3 e Web Components, já foi lançado, veja a documentação do mdui 2.

Snackbar

O Snackbar exibe uma pequena caixa pop-up na parte inferior da janela, que pode desaparecer automaticamente após um tempo limite ou quando o usuário clica ou toca em outro lugar na tela.

Apenas um Snackbar pode ser exibido na tela por vez. Se um novo Snackbar for aberto enquanto o atual ainda está visível, o próximo Snackbar será adicionado à fila e aberto após o anterior fechar.

Como usar

Basta chamar o método mdui.snackbar(params).

Leitura relacionada

Diretrizes de design do Material Design: Componentes - Snackbars

Como usar

O Snackbar é chamado diretamente via JavaScript, sem necessidade de escrever layout HTML.

Existem duas formas de chamar o Snackbar:

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

Ambos os métodos retornam uma instância do Snackbar.

Parâmetros suportados pelo Snackbar:

Nome do parâmetro	Tipo	Valor padrão	Descrição
`message`	`string`		Texto do Snackbar. Ao chamar via `mdui.snackbar(params)`, este parâmetro não pode estar vazio.
`timeout`	`int`	`4000`	Tempo de atraso para ocultar automaticamente o Snackbar, em milissegundos. Defina como 0 para não fechar automaticamente.
`position`	`string`	`bottom`	Posição do Snackbar. `bottom`: inferior `top`: superior `left-top`: canto superior esquerdo `left-bottom`: canto inferior esquerdo `right-top`: canto superior direito `right-bottom`: canto inferior direito
`buttonText`	`string`		Texto do botão.
`buttonColor`	`string`	`#90CAF9`	Cor do texto do botão, pode ser um nome de cor ou valor de cor, como `red`, `#ffffff`, `rgba(255, 255, 255, 0.3)`, etc.
`closeOnButtonClick`	`boolean`	`true`	Se o Snackbar deve ser fechado ao clicar no botão.
`closeOnOutsideClick`	`boolean`	`true`	Se o Snackbar deve ser fechado ao clicar ou tocar fora da área do Snackbar.
`onClick`	`function`		Função de callback ao clicar no Snackbar.
`onButtonClick`	`function`		Função de callback ao clicar no botão do Snackbar.
`onOpen`	`function`		Função de callback quando o Snackbar começa a abrir.
`onOpened`	`function`		Função de callback após o Snackbar ser aberto.
`onClose`	`function`		Função de callback quando o Snackbar começa a fechar.
`onClosed`	`function`		Função de callback após o Snackbar ser fechado.

Métodos da instância do Snackbar:

Nome do método	Descrição
`close`	Fecha o Snackbar. Após fechar, a instância será destruída.

Exemplo

Snackbar comum

Exemplo

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

Snackbar com callback

Exemplo

mdui.snackbar({
  message: 'Archived',
  buttonText: 'undo',
  onClick: function(){
    mdui.alert('Snackbar clicado');
  },
  onButtonClick: function(){
    mdui.alert('Botão clicado');
  },
  onClose: function(){
    mdui.alert('Fechado');
  }
});

Snackbar em diferentes posições

Exemplo

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

Tabela