JS Module

SWAlert Framework

Sistema de notificações toast completo. 5 tipos, 6 posições, progress bar, caixa de confirmação com focus trap ✨ zero dependências, zero CSS externo (injetado automaticamente).

1. Tipos

5 variantes semânticas + aliases em PT-BR.

Demo ✨ clique para disparar

// Métodos principais
SWAlert.ok('Salvo com sucesso!');
SWAlert.err('Falha na requisição.');
SWAlert.ale('Atenção necessária.');
SWAlert.inf('Nova mensagem recebida.');
SWAlert.drk('Notificação silenciosa.');

// Aliases PT-BR
SWAlert.sucesso('Dados atualizados!');
SWAlert.erro('Não foi possível salvar.');
SWAlert.alerta('Verifique os campos.');
SWAlert.info('Processando...');

2. Posições

9 posições ✨ topo, centro e base - esquerdo/centro/direito.

Demo ✨ clique em qualquer célula

// 3º parâmetro = posição
// Topo:   'tl' | 'tc' | 'tr'
// Centro: 'cl' | 'cc' | 'cr'
// Base:   'bl' | 'bc' | 'br'
// Padrão: 'tr'

SWAlert.ok('Salvo!', 3000, 'bl');   // base esquerdo
SWAlert.err('Erro!', 5000, 'cc');   // centro tela

3. Duração + Título

Controle preciso de timing e suporte a títulos.

Duração personalizada

Com título

// Assinatura completa
SWAlert.ok(msg, duração_ms, posição, título)

// dur = 0 — não fecha automaticamente
SWAlert.drk('Aguardando confirmação...', 0, 'tr');

// Com título
SWAlert.ok(
    'Arquivo enviado com sucesso.',
    4000, 'tr',
    'Upload completo'
);

4. Caixa de Confirmação

Dialog modal com focus trap, ESC para cancelar e callback.

Demo

SWAlert.confirmar(
    'Tem certeza que deseja deletar?',   // mensagem
    (confirmado) => {                    // callback
        if (confirmado) {
            deletarRegistro();
            SWAlert.ok('Deletado!');
        }
    },
    'Deletar registro',  // título (opcional, padrão: 'Confirmação')
    '✨'                 // ícone  (opcional, padrão: '✨')
);

5. Atributo HTML

Dispare alertas direto no HTML sem escrever JS.

Demo

6. Quick Reference

Método Parâmetros Descrição
SWAlert.ok() msg, dur?, pos?, title? Toast verde — sucesso
SWAlert.err() msg, dur?, pos?, title? Toast vermelho — erro
SWAlert.ale() msg, dur?, pos?, title? Toast amarelo — alerta
SWAlert.inf() msg, dur?, pos?, title? Toast azul — informação
SWAlert.drk() msg, dur?, pos?, title? Toast neutro — silencioso
SWAlert.sucesso() msg, dur?, pos? Alias PT-BR de .ok()
SWAlert.erro() msg, dur?, pos? Alias PT-BR de .err()
SWAlert.alerta() msg, dur?, pos? Alias PT-BR de .ale()
SWAlert.info() msg, dur?, pos? Alias PT-BR de .inf()
SWAlert.confirmar() msg, cb, title?, icon? Dialog com callback booleano
Parâmetro Tipo Padrão Valores
msg string "" (vazio) HTML aceito
dur number 4000 ms — 0 = persistente
pos string 'tr' tl — tc — tr — cl — cc — cr — bl — bc — br
title string '' Texto do cabeçalho