REFERÊNCIA RÁPIDA HTMX
Atributos, triggers, swap, eventos, extensões
Básico
Instalação
npm install htmx.org
Como Funciona
| HTML-driven | Emitir AJAX de atributos HTML, sem JS necessário |
| Swap content | Servidor retorna fragmentos HTML, htmx os troca |
| Progressive | Aprimora HTML padrão; degrada graciosamente |
| REST-friendly | Funciona com qualquer framework server-side |
Atributos
Atributos de Requisição Principais
| hx-get="/url" | Emitir requisição GET para URL |
| hx-post="/url" | Emitir requisição POST para URL |
| hx-put="/url" | Emitir requisição PUT para URL |
| hx-patch="/url" | Emitir requisição PATCH para URL |
| hx-delete="/url" | Emitir requisição DELETE para URL |
Atributos de Comportamento
| hx-trigger | Evento que aciona a requisição |
| hx-target | Elemento para trocar o conteúdo |
| hx-swap | Como trocar o conteúdo de resposta |
| hx-select | Selecionar subconjunto do HTML de resposta |
| hx-vals | Adicionar valores extras à requisição |
| hx-confirm | Mostrar diálogo de confirmação antes da requisição |
| hx-disable | Desabilitar processamento htmx no elemento |
Triggers
Sintaxe de Trigger
Modificadores de Trigger
| changed | Acionar somente se o valor mudou |
| delay:Ns | Aguardar N segundos antes de acionar |
| throttle:Nms | Limitar a uma vez por N ms |
| once | Acionar apenas na primeira vez |
| from:selector | Ouvir em um elemento diferente |
| every Ns | Fazer polling a cada N segundos |
| load | Acionar no carregamento do elemento |
| revealed | Acionar quando o elemento rola para a visualização |
Targets
Seleção de Target
Palavras-chave de Target
| this | O próprio elemento (padrão) |
| closest <sel> | Ancestral mais próximo que corresponde ao seletor |
| find <sel> | Primeiro descendente que corresponde ao seletor |
| next <sel> | Próximo irmão que corresponde ao seletor |
| previous <sel> | Irmão anterior que corresponde ao seletor |
Swap
Estratégias de Swap
| innerHTML | Substituir conteúdo interno (padrão) |
| outerHTML | Substituir todo o elemento alvo |
| afterbegin | Inserir no início do target |
| beforeend | Adicionar ao final do target |
| beforebegin | Inserir antes do target |
| afterend | Inserir após o target |
| delete | Remover elemento alvo |
| none | Sem swap, apenas acionar eventos |
Modificadores de Swap
Headers
Headers de Requisição (enviados pelo htmx)
| HX-Request | Sempre "true" para requisições htmx |
| HX-Target | ID do elemento alvo |
| HX-Trigger | ID do elemento acionador |
| HX-Trigger-Name | Nome do elemento acionador |
| HX-Current-URL | URL atual do navegador |
| HX-Prompt | Resposta do usuário ao hx-prompt |
Headers de Resposta (enviados pelo servidor)
| HX-Redirect | Redirecionamento client-side para URL |
| HX-Refresh | Atualização completa da página se "true" |
| HX-Retarget | Substituir hx-target por seletor CSS |
| HX-Reswap | Substituir estratégia hx-swap |
| HX-Trigger | Acionar eventos client-side |
| HX-Push-Url | Inserir URL no histórico do navegador |
Eventos
Eventos de Ciclo de Vida
| htmx:configRequest | Antes da requisição; modificar params/headers |
| htmx:beforeRequest | Logo antes da chamada AJAX |
| htmx:afterRequest | Após a requisição ser concluída |
| htmx:beforeSwap | Antes do conteúdo ser trocado |
| htmx:afterSwap | Após o conteúdo ser trocado |
| htmx:afterSettle | Após o DOM se estabilizar após o swap |
| htmx:responseError | Servidor retornou status de erro |
Ouvindo Eventos
document.body.addEventListener("htmx:afterSwap", (e) => {
console.log("Swapped:", e.detail.target);
});
// Cancel a request
document.body.addEventListener("htmx:configRequest", (e) => {
if (!confirm("Proceed?")) e.preventDefault();
});
Extensões
Usando Extensões
Extensões Populares
| json-enc | Codificar corpo da requisição como JSON |
| loading-states | Gerenciar classes CSS de estado de carregamento |
| head-support | Fundir tags das respostas |
| preload | Pré-carregar links no mousedown/hover |
| sse | Suporte a Server-Sent Events |
| ws | Suporte a WebSocket |
| response-targets | Diferentes targets para respostas de erro |
Indicadores
Indicador de Carregamento
Loading...
CSS do Indicador
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline; }
.htmx-request.htmx-indicator { display: inline; }
htmx adiciona a classe htmx-request ao elemento durante requisições
Desabilitar Durante Requisição
hx-disabled-elt adiciona o atributo disabled durante a requisição
Padrões Comuns
Busca Ativa
Scroll Infinito
| Loading more... |
Excluir com Confirmação
Edição Inline