mirror of
https://github.com/bigskysoftware/htmx.git
synced 2025-09-29 22:11:22 +00:00
2.0 KiB
2.0 KiB
| layout | title |
|---|---|
| layout.njk | </> htmx - high power tools for html |
Official Extensions
The following extensions are tested against htmx and are considered officially supported.
debug
Description
This extension includes log all htmx events for the element it is on with the "DEBUG:" prefix.
Usage
<button hx-ext="debug">Debug Me...</button>
Source
htmx.defineExtension('debug', {
onEvent : function(name, evt) {
if(console.debug){
console.debug(name, evt);
} else if(console) {
console.log("DEBUG:", name, evt);
} else {
throw "NO CONSOLE SUPPORTED"
}
}
});
rails-method
Description
This extension includes the rails _method parameter in non-GET or POST requests.
Usage
<body hx-ext="rails-method">
...
</body>
Source
htmx.defineExtension('rails-method', {
onEvent : function(name, evt) {
if(name === "configRequest.htmx"){
var methodOverride = evt.detail.headers['X-HTTP-Method-Override'];
if(methodOverride){
evt.detail.parameters['_method'] = methodOverride;
}
}
}
});
morphdom-swap
Description
This extension allows you to use the morphdom library as the swapping mechanism in htmx.
Usage
<header>
<script src="lib/morphdom-umd.js"></script> <!-- include the morphdom library -->
</header>
<body hx-ext="morphdom-swap">
<button hx-swap="morphdom">This button will be swapped with morphdom!</button>
</body>
Source
htmx.defineExtension('morphdom-swap', {
handleSwap : function(swapStyle, target, fragment) {
if (swapStyle === 'morphdom') {
morphdom(target, fragment.outerHTML);
return []; // no settle phase when using morphdom!
}
}
});