Cheatsheet : HTMX
CheatSheet HTMX : Guide complet, résumé, aide-mémoire, tutoriel et conseils clés pour apprendre et maîtriser HTMX efficacement et rapidement.
4 chapitres
Hypermedia API
copié !
Les requêtes AJAX en HTMX doivent retourner du HTML.
API retournant du HTML => « Hypermedia API »
API retournant du JSON => « Data API »
Installation npm
copié !
npm install htmx.org
Installation permettant de bénéficier d’une phase de build
Installation CDN
copié !
<script src="https://unpkg.com/[email protected]" integrity="sha384-0gxUXCCR8yv9FM2b+U3FDbsKthCI66oH5IA9fHppQq9DDMHuMauqq1ZHBpJxQ0J0" crossorigin="anonymous"></script>
Eviter l’utilisation d’un CDN en production
Attributs HTTP
copié !
Envoyer une requête AJAX à un serveur.
<button hx-get="<url>">Requête GET vers URL</button>
<button hx-post="<url>">Requête POST vers URL</button>
<button hx-put="<url>">Requête PUT vers URL</button>
<button hx-patch="<url>">Requête PATCH vers URL</button>
<button hx-delete="<url>">Requête DELETE vers URL</button>
hx-<méthode_http>=> attribut obligatoire pour exploiter HTMX- URL absolue ou relative selon emplacement du backend
Triggers
copié !
Spécifier l’évènement déclenchant la requête AJAX.
<button hx-get="<url>" hx-trigger="<event>">
Démo
</button>
hx-triggerattend un évènement JS (click,keyup…)- Evènements spéciaux :
load: au chargement de l’élémentrevealed: lorsque l’élément apparaît (au défilement)intersect: lorsqu’une portion spécifique de l’élément apparaît (au défilement)
- Par défaut, requête AJAX déclenchée par évènement « naturel » :
<input>,<textarea>et<select>:change<form>:submit- Autres balises :
click
Modifiers
copié !
Modifier le comportement du trigger.
<button hx-get="<url>" hx-trigger="mouseover <modifier>">
Démo
</button>
Modifiers les plus courant :
once: Déclenchement unique.changed: Déclenchement si valeur du champ de formulaire rattaché a changé.delay:<délai>: Attend avant déclenchement. Si nouvel évènement, réinitialise le décompte.throttle:<délai>: Attend avant déclenchement. Si décompte en cours, ignore les évènements additionnels.from:<Sélecteur CSS>: Écoute l’évènement sur un autre élément.
Filters
copié !
Conditionne le déclenchement du trigger.
<button hx-get="<url>" hx-trigger="mouseover[<filter>]">
Démo
</button>
- Filtre => expression JavaScript notée entre crochets
- Accès à l’objet
event(target,clientX…) - Accès à
this, faisant référence à l’élément courant
Polling
copié !
Déclencher des requêtes périodiques.
<button hx-get="<url>" hx-trigger="every <interval>">
Démo
</button>
- Intervalle généralement en secondes (
0.5s,10s…). - Arrêter le polling => répondre avec le code HTTP
286depuis serveur
Indicateur
copié !
Loader visible pendant le traitement des requêtes AJAX.
<span hx-get="/load-more">
Afficher plus
<img class="htmx-indicator" src="loader.svg">
</span>
- Initialement :
.htmx-indicator=> opacité0 - Pendant traitement requête AJAX :
.htmx-indicator=> opacité à1
Target
copié !
Spécifier où injecter le contenu de la réponse AJAX.
<button hx-get="<url>" hx-target="<sélecteur_CSS>">
Démo
</button>
<div id="cible"></div>
- Requête AJAX par défaut injectée dans l’élément possédant
hx-<méthode_http> - Possiblité de cibler un autre élément via un sélecteur CSS (ex :
#cible)
Swapping
copié !
Spécifier comment le contenu ciblé par hx-target dois être mis à jour.
<button hx-get="<url>" hx-swap="<swap>">
Démo
</button>
- Requête AJAX par défaut injectée dans l’élément ciblé (
innerHTML) - Types de swapping :
innerHTML(défaut) : Insère à l’intérieurouterHTML: Remplacebeforebegin: Avantafterbegin: Premier enfantbeforeend: Dernier enfantafterend: Aprèsdelete: Supprime, sans insertionnone: Aucune insertion