Alert / Toast Componentes

O que é

Avisa o usuário sobre o resultado de uma ação (sucesso, erro, alerta, info) sem interromper o fluxo, e uma confirmar() pra decisões que precisam de resposta explícita.

Como funciona

Cada posição (canto) tem sua própria caixa empilhadora, criada sob demanda. Barra de progresso mostra o tempo até sumir sozinho (duração 0 = fica até ser fechado manualmente). confirmar() abre um overlay modal com foco preso, ESC e clique-fora cancelam.

Exemplos

<div class="demo-row">
  <button sw-btn class="sw-btn-suc sw-btn-sm" sw-toast="ok" sw-toast-msg="Salvo com sucesso.">ok</button>
  <button sw-btn class="sw-btn-err sw-btn-sm" sw-toast="err" sw-toast-msg="Não foi possível salvar.">err</button>
  <button sw-btn class="sw-btn-ale sw-btn-sm" sw-toast="ale" sw-toast-msg="Verifique os campos.">ale</button>
  <button sw-btn class="sw-btn-inf sw-btn-sm" sw-toast="inf" sw-toast-msg="Nova versão disponível.">inf</button>
  <button sw-btn class="sw-btn-sec sw-btn-sm" sw-toast="drk" sw-toast-msg="Modo escuro ativado.">drk</button>
</div>

// 1º parâmetro é a posição
// Topo: 'tl' | 'tc' | 'tr'
// Centro: 'cl' | 'cc' | 'cr'
// Base: 'bl' | 'bc' | 'br'
// Padrão: 'tr'
SW.Alert.ok('Salvo!', 3000, 'bl');   // base-esquerda
SW.Alert.err('Erro!', 5000, 'cc');   // centro-tela

<button sw-btn class="sw-btn-out" sw-toast="inf" sw-toast-title="Aviso" sw-toast-msg="Fica 6 segundos, canto superior esquerdo." sw-toast-dur="6000" sw-toast-pos="tl">Disparar no canto superior esquerdo</button>

<button type="button" class="sw-btn sw-btn-pri" id="alertJsBtn">Disparar via JS</button>
<script>
  document.getElementById('alertJsBtn').addEventListener('click', () => {
    SW.Alert.ok('Operação concluída com sucesso.');
  });
</script>

<button type="button" class="sw-btn sw-btn-out" id="confirmBtn">Excluir item</button>
<script>
  document.getElementById('confirmBtn').addEventListener('click', () => {
    SW.Alert.confirmar('Tem certeza que quer excluir?', (ok) => {
      SW.Alert[ok ? 'ok' : 'inf'](ok ? 'Excluído.' : 'Cancelado.');
    });
  });
</script>

Atributos

Variantes

Nenhum.

Eventos

Nenhum.

API (JavaScript)

Requisitos

Nenhuma.

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

• Sem fila/limite — se você disparar muitos alertas rapidamente, todos empilham na mesma caixa.