itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-10-04 16:25:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Documentation

Browse Source
This commit is contained in:
Ben Pate 2020-12-14 13:41:41 -07:00
parent 84ac44b591
commit b4f26aef0e
3 changed files with 29 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
www/attributes/hx-ext.md
View File

@ -16,3 +16,16 @@ and on the `body` tag for it to apply to all htmx requests.
* `hx-ext` is both inherited and merged with parent elements, so you can specify extensions on any element in the DOM * `hx-ext` is both inherited and merged with parent elements, so you can specify extensions on any element in the DOM
hierarchy and it will apply to all child elements. hierarchy and it will apply to all child elements.
* You can ignore an extension that is defined by a parent node using `hx-ext="ignore:extensionName"`
```html
<div ext="example">
"Example" extension is used in this part of the tree...
<div ext="ignore:example">
... but it will not be used in this part.
</div>
</div>
```

5
www/docs.md
View File

@ -516,7 +516,10 @@ Htmx has an extension mechanism that allows you to customize the libraries' beha
defined in javascript](/extensions#defining) and then used via the [`hx-ext`](/attributes/hx-ext) attribute: defined in javascript](/extensions#defining) and then used via the [`hx-ext`](/attributes/hx-ext) attribute:
```html ```html
<button hx-post="/example" hx-ext="debug">This button uses the debug extension</button> <div hx-ext="debug">
<button hx-post="/example">This button used the debug extension</button>
<button hx-post="/example" hx-ext="ignore:debug">This button does not</button>
</div>
``` ```
If you are interested in adding your own extension to htmx, please [see the extension docs](/extensions) If you are interested in adding your own extension to htmx, please [see the extension docs](/extensions)

12
www/extensions.md
View File

@ -33,6 +33,18 @@ and on the `body` tag for it to apply to all htmx requests.
<button hx-post="/example" hx-ext="debug, json-enc">This Button Uses Two Extensions</button> <button hx-post="/example" hx-ext="debug, json-enc">This Button Uses Two Extensions</button>
``` ```
## <a name="ignore"></a> [Ignoring Extensions](#ignoring)
By default, extensions are applied to the DOM node where it is invoked, along with all child elements inside of that parent node.
If you need to disable an extension somewhere within the DOM tree, you can use the `ignore:` keyword to stop it from being used.
```html
<div hx-ext="debug">
<button hx-post="/example">This button used the debug extension</button>
<button hx-post="/example" hx-ext="ignore:debug">This button does not</button>
</div>
```
## <a name="included"></a> [Included Extensions](#included) ## <a name="included"></a> [Included Extensions](#included)
htmx includes a set of extensions out of the box that address common developer needs. These extensions are tested htmx includes a set of extensions out of the box that address common developer needs. These extensions are tested