HTMX RIFERIMENTO RAPIDO
Attributi, trigger, swap, eventi, estensioni
Basi
Installazione
npm install htmx.org
Come Funziona
| HTML-driven | AJAX tramite attributi HTML, senza JS |
| Swap contenuto | Il server restituisce frammenti HTML che htmx sostituisce |
| Progressivo | Migliora l'HTML standard; degrada con grazia |
| REST-friendly | Funziona con qualsiasi framework server-side |
Attributi
Attributi Richiesta Principali
| hx-get="/url" | Invia richiesta GET all'URL |
| hx-post="/url" | Invia richiesta POST all'URL |
| hx-put="/url" | Invia richiesta PUT all'URL |
| hx-patch="/url" | Invia richiesta PATCH all'URL |
| hx-delete="/url" | Invia richiesta DELETE all'URL |
Attributi di Comportamento
| hx-trigger | Evento che scatena la richiesta |
| hx-target | Elemento in cui sostituire il contenuto |
| hx-swap | Come sostituire il contenuto della risposta |
| hx-select | Seleziona un sottoinsieme dell'HTML della risposta |
| hx-vals | Aggiunge valori extra alla richiesta |
| hx-confirm | Mostra dialogo di conferma prima della richiesta |
| hx-disable | Disabilita l'elaborazione htmx sull'elemento |
Trigger
Sintassi dei Trigger
Modificatori dei Trigger
| changed | Attiva solo se il valore è cambiato |
| delay:Ns | Attende N secondi prima di attivare |
| throttle:Nms | Limita a una volta ogni N ms |
| once | Attiva solo la prima volta |
| from:selector | Ascolta su un elemento diverso |
| every Ns | Polling ogni N secondi |
| load | Attiva al caricamento dell'elemento |
| revealed | Attiva quando l'elemento scorre nella vista |
Target
Selezione del Target
Parole Chiave Target
| this | L'elemento stesso (default) |
| closest <sel> | Antenato più vicino corrispondente al selettore |
| find <sel> | Primo discendente corrispondente al selettore |
| next <sel> | Fratello successivo corrispondente al selettore |
| previous <sel> | Fratello precedente corrispondente al selettore |
Swapping
Strategie di Swap
| innerHTML | Sostituisce il contenuto interno (default) |
| outerHTML | Sostituisce l'intero elemento target |
| afterbegin | Prepende dentro il target |
| beforeend | Appende dentro il target |
| beforebegin | Inserisce prima del target |
| afterend | Inserisce dopo il target |
| delete | Rimuove l'elemento target |
| none | Nessuno swap, solo eventi |
Modificatori di Swap
Header
Header di Richiesta (inviati da htmx)
| HX-Request | Sempre "true" per le richieste htmx |
| HX-Target | ID dell'elemento target |
| HX-Trigger | ID dell'elemento che ha scatenato |
| HX-Trigger-Name | Nome dell'elemento che ha scatenato |
| HX-Current-URL | URL corrente del browser |
| HX-Prompt | Risposta utente da hx-prompt |
Header di Risposta (inviati dal server)
| HX-Redirect | Reindirizzamento client-side all'URL |
| HX-Refresh | Ricarica completa della pagina se "true" |
| HX-Retarget | Sovrascrive hx-target con selettore CSS |
| HX-Reswap | Sovrascrive la strategia hx-swap |
| HX-Trigger | Scatena eventi client-side |
| HX-Push-Url | Inserisce URL nella cronologia del browser |
Eventi
Eventi del Ciclo di Vita
| htmx:configRequest | Prima della richiesta; modifica params/header |
| htmx:beforeRequest | Appena prima della chiamata AJAX |
| htmx:afterRequest | Dopo il completamento della richiesta |
| htmx:beforeSwap | Prima che il contenuto venga sostituito |
| htmx:afterSwap | Dopo che il contenuto è stato sostituito |
| htmx:afterSettle | Dopo che il DOM si è stabilizzato |
| htmx:responseError | Il server ha restituito uno stato di errore |
Ascolto degli Eventi
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();
});
Estensioni
Uso delle Estensioni
Estensioni Popolari
| json-enc | Codifica il corpo della richiesta come JSON |
| loading-states | Gestisce classi CSS dello stato di caricamento |
| head-support | Unisce i tag dalle risposte |
| preload | Precarica link al mousedown/hover |
| sse | Supporto Server-Sent Events |
| ws | Supporto WebSocket |
| response-targets | Target diversi per risposte di errore |
Indicatori
Indicatore di Caricamento
Loading...
CSS Indicatore
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline; }
.htmx-request.htmx-indicator { display: inline; }
htmx aggiunge la classe htmx-request all'elemento durante le richieste
Disabilita Durante la Richiesta
hx-disabled-elt aggiunge l'attributo disabled durante la richiesta
Pattern Comuni
Ricerca Attiva
Scroll Infinito
| Loading more... |
Elimina con Conferma
Modifica Inline