snackbar

A função snackbar é um encapsulamento do componente <mdui-snackbar>. Usando esta função, você pode abrir um snackbar sem precisar escrever o código HTML do componente.

Como usar

Importe a função conforme necessário:

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

Exemplo de uso:

abrir

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

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

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

  button.addEventListener("click", () => {
    snackbar({
      message: "Foto arquivada",
      action: "Desfazer",
      onActionClick: () => console.log("clicou no botão de ação")
    });
  });
</script>

API

snackbar(options: Options): Snackbar

A função recebe um objeto Options como parâmetro; o valor retornado é a instância do componente <mdui-snackbar>.

Options

Nome do atributo	Tipo	Valor padrão
`message`	`string`	-
Conteúdo da mensagem de texto no Snackbar
`placement`	`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end'`	`bottom`
Posição onde o Snackbar aparece. O padrão é `bottom`. Valores opcionais: `top`: no topo, alinhado ao centro `top-start`: no topo, alinhado à esquerda `top-end`: no topo, alinhado à direita `bottom`: na parte inferior, alinhado ao centro `bottom-start`: na parte inferior, alinhado à esquerda `bottom-end`: na parte inferior, alinhado à direita
`action`	`string`	-
Texto do botão de ação
`closeable`	`boolean`	`false`
Se deve exibir um botão de fechar no lado direito
`messageLine`	`1 \| 2`	-
Número máximo de linhas para a mensagem de texto. Por padrão, não há limite de linhas. Valores opcionais: `1`: a mensagem de texto exibe no máximo uma linha `2`: a mensagem de texto exibe no máximo duas linhas
`autoCloseDelay`	`number`	`5000`
Tempo após o qual o Snackbar é fechado automaticamente (em milissegundos). Definir como 0 desativa o fechamento automático. O padrão é fechar automaticamente após 5 segundos.
`closeOnOutsideClick`	`boolean`	`false`
Se deve fechar o Snackbar ao clicar ou tocar fora da área do Snackbar
`queue`	`string`	-
Nome da fila. Por padrão, a fila não é ativada; ao chamar esta função várias vezes, vários snackbars serão exibidos simultaneamente. Você pode passar um nome de fila neste parâmetro. Funções snackbar com o mesmo nome de fila abrirão o próximo snackbar somente após o anterior ser fechado.
`onClick`	`(snackbar: Snackbar) => void`	-
Função de retorno chamada ao clicar no Snackbar. O parâmetro da função é a instância do snackbar, e `this` também aponta para a instância do snackbar.
`onActionClick`	`(snackbar: Snackbar) => void \| boolean \| Promise<void>`	-
Função de retorno chamada ao clicar no botão de ação. O parâmetro da função é a instância do snackbar, e `this` também aponta para a instância do snackbar. Por padrão, o snackbar é fechado após o clique; se o valor retornado for `false`, o snackbar não é fechado; se o valor retornado for uma promise, o snackbar será fechado após a promise ser resolvida.
`onOpen`	`(snackbar: Snackbar) => void`	-
Função de retorno chamada quando o Snackbar começa a ser exibido. O parâmetro da função é a instância do snackbar, e `this` também aponta para a instância do snackbar.
`onOpened`	`(snackbar: Snackbar) => void`	-
Função de retorno chamada quando a animação de exibição do Snackbar é concluída. O parâmetro da função é a instância do snackbar, e `this` também aponta para a instância do snackbar.
`onClose`	`(snackbar: Snackbar) => void`	-
Função de retorno chamada quando o Snackbar começa a ser ocultado. O parâmetro da função é a instância do snackbar, e `this` também aponta para a instância do snackbar.
`onClosed`	`(snackbar: Snackbar) => void`	-
Função de retorno chamada quando a animação de ocultação do Snackbar é concluída. O parâmetro da função é a instância do snackbar, e `this` também aponta para a instância do snackbar.

Capítulo anterior

prompt

Próximo capítulo

getTheme