Toast (SW.Alert) no SWCore — documentação e exemplos

O que é

Mensagem temporária no canto da tela, diferente do Alerta inline (que fica fixo no fluxo da página). Dispara por atributo ou por JavaScript.

Como funciona

Empilha várias mensagens automaticamente se disparadas em sequência; cada uma tem sua própria barra de progresso até sumir.

Exemplos

Por atributo — os 5 tipos Ao vivo

<button sw-btn="suc"
        sw-toast="ok"
        sw-toast-msg="Salvo com sucesso!"
        sw-toast-title="Pronto">Salvar</button>

<!-- tipos: ok · err · ale · inf · drk -->

Por JavaScript Ao vivo

SWAlert.ok('Salvo com sucesso!', 'Pronto');
SWAlert.err('Falha na conexão.', 'Erro');
SWAlert.ale('Confira os dados.');
SWAlert.inf('Relatório pronto.');
SWAlert.drk('Mensagem neutra.');

// os mesmos, com nome em português:
SWAlert.sucesso('...'); SWAlert.erro('...');
SWAlert.alerta('...');  SWAlert.info('...');

Os 9 cantos da tela Ao vivo

<!-- t=topo · c=centro · b=baixo  ×  l=esquerda · c=centro · r=direita -->
<button sw-toast="inf" sw-toast-pos="bl" sw-toast-msg="…">canto de baixo</button>

<!-- por JS, a posição é o 4º argumento -->
SWAlert.ok('Salvo!', 'Pronto', 4000, 'bc');

Quanto tempo fica na tela Ao vivo

<button sw-toast="inf" sw-toast-dur="8000" sw-toast-msg="…">8 segundos</button>

<!-- por JS, a duração é o 3º argumento -->
SWAlert.inf('Mensagem longa', 'Título', 8000);

<!-- a barrinha embaixo do toast mostra o tempo correndo -->

Vários de uma vez — eles empilham Ao vivo

SWAlert.ok('Primeiro');
SWAlert.inf('Segundo');
SWAlert.ale('Terceiro');

// eles se empilham sozinhos no canto, um embaixo do outro

Confirmação — com resposta Ao vivo

Responda na caixa: o toast seguinte muda conforme a sua resposta.

SWAlert.confirmar(
  'Excluir este pedido? Não dá pra desfazer.',   // mensagem
  function (ok) {                                 // callback com a resposta
    if (ok) excluirDeVerdade();
    else SWAlert.inf('Cancelado');
  },
  'Tem certeza?'                                  // título (opcional)
);

// assinatura: SWAlert.confirmar(msg, callback, titulo?, icone?)
// a resposta chega no callback: true = confirmou, false = cancelou

Atributos

sw-toast

no elemento que dispara: o tipo do toast — ok \| err \| ale \| inf \| drk

sw-toast-msg

a mensagem

sw-toast-title

o título, acima da mensagem (opcional)

sw-toast-dur

quanto tempo fica na tela, em ms

sw-toast-pos

em que canto aparece — padrão "tr" (direita em cima)

Variantes

ok

verde — deu certo

err

vermelho — deu erro

ale

âmbar — atenção

inf

azul — informação

drk

neutro escuro

tl \| tc \| tr

canto de cima — esquerda, centro, direita (tr é o padrão)

cl \| cc \| cr

meio da tela — esquerda, centro, direita

bl \| bc \| br

canto de baixo — esquerda, centro, direita

[sw-toast-ico] · [sw-toast-ttl] · [sw-toast-msg]

peças internas: ícone, título e mensagem

[sw-toast-bar]

a barrinha que corre mostrando o tempo até sumir

[sw-toast-cls]

o × de fechar antes da hora

Eventos

Nenhum.

API (JavaScript)

SWAlert.ok(msg, titulo?, duração?, pos?)

toast verde de sucesso

SWAlert.err(msg, …)

toast vermelho de erro

SWAlert.ale(msg, …)

toast âmbar de atenção

SWAlert.inf(msg, …)

toast azul de informação

SWAlert.drk(msg, …)

toast neutro escuro

SWAlert.sucesso / .erro / .alerta / .info

os mesmos, com nome em português

Requisitos

Nenhuma.

Limitações — o que ele não faz

É passageiro: some sozinho. Pra um aviso que precisa ficar na tela até o usuário resolver, use o Alerta (inline).
A confirmação (SWAlert.confirmar) responde pelo callback, não com await — trate a resposta dentro da função que você passa.

Toast (SW.Alert) Componentes