add info about the extensions
This commit is contained in:
parent
3fb719bf15
commit
1c3065e432
5 changed files with 59 additions and 2 deletions
20
htmgo-site/md/docs/7_htmx_extensions/1_overview.md
Normal file
20
htmgo-site/md/docs/7_htmx_extensions/1_overview.md
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
### HTMX Extensions
|
||||||
|
|
||||||
|
htmgo provides a few extra htmx extensions to make common tasks easier.
|
||||||
|
Some of these extensions are optional, and some of these are required for htmgo to work correctly.
|
||||||
|
|
||||||
|
The following extensions are provided by htmgo:
|
||||||
|
- [Trigger Children](#htmx-extensions-trigger-children)
|
||||||
|
- [Mutation Error](#htmx-extensions-mutation-error)
|
||||||
|
- [SSE](#pushing-data-server-sent-events)
|
||||||
|
- [Path Deps](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/path-deps/README.md)
|
||||||
|
|
||||||
|
Default extensions should be included in your project by adding the following attribute to your html tag.
|
||||||
|
```go
|
||||||
|
h.Html(
|
||||||
|
h.HxExtension(h.BaseExtensions())
|
||||||
|
)
|
||||||
|
```
|
||||||
|
|
||||||
|
**Important**: h.BaseExtensions will add the the 'htmgo' extension, which is a required extension for inline scripts to work properly, please always include it in your project.
|
||||||
|
|
||||||
13
htmgo-site/md/docs/7_htmx_extensions/2_trigger_children.md
Normal file
13
htmgo-site/md/docs/7_htmx_extensions/2_trigger_children.md
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
### HTMX Extensions - Trigger Children
|
||||||
|
|
||||||
|
The `trigger-children` extension allows you to trigger an event on all children and siblings of an element.
|
||||||
|
|
||||||
|
This is useful for things such as:
|
||||||
|
1. Letting a child element (such as a button) inside a form know the form was submitted
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
**Example:** https://github.com/maddalax/htmgo/blob/master/htmgo-site/pages/form.go#L17
|
||||||
|
|
||||||
|
In this example: The trigger-children extension will trigger **hx-before-request** and **hx-after-request**
|
||||||
|
on all children of the form when the form is submitted, and the button reacts to that by showing a loading state.
|
||||||
24
htmgo-site/md/docs/7_htmx_extensions/3_mutation_error.md
Normal file
24
htmgo-site/md/docs/7_htmx_extensions/3_mutation_error.md
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
### HTMX Extensions - Mutation Error
|
||||||
|
|
||||||
|
The `mutation-error` extension allows you to trigger an event when a request returns a >= 400 status code.
|
||||||
|
|
||||||
|
This is useful for things such as:
|
||||||
|
1. Letting a child element (such as a button) inside a form know there was an error.
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
**Example:**
|
||||||
|
```go
|
||||||
|
h.Form(
|
||||||
|
h.HxTriggerChildren(),
|
||||||
|
h.HxMutationError(
|
||||||
|
js.Alert("An error occurred"),
|
||||||
|
),
|
||||||
|
h.Button(
|
||||||
|
h.Type("submit"),
|
||||||
|
h.Text("Submit"),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
```
|
||||||
|
|
||||||
|
It can also be used on children elements that do not make an xhr request, if you combine it with the `hx-trigger-children` extension.
|
||||||
|
|
@ -23,4 +23,4 @@ func IndexPage(ctx *h.RequestContext) *h.Page {
|
||||||
3. automatic page and partial registration based on file path
|
3. automatic page and partial registration based on file path
|
||||||
4. built in tailwindcss support, no need to configure anything by default
|
4. built in tailwindcss support, no need to configure anything by default
|
||||||
5. plugin architecture to include optional plugins to streamline development, such as http://entgo.io
|
5. plugin architecture to include optional plugins to streamline development, such as http://entgo.io
|
||||||
6. custom [htmx extensions](https://github.com/maddalax/htmgo/tree/b610aefa36e648b98a13823a6f8d87566120cfcc/framework/assets/js/htmxextensions) to reduce boilerplate with common tasks
|
6. custom [htmx extensions](https://github.com/maddalax/htmgo/tree/master/framework/assets/js/htmxextensions) to reduce boilerplate with common tasks
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,7 @@ func DocsPage(ctx *h.RequestContext) *h.Page {
|
||||||
return h.NewPage(base.RootPage(
|
return h.NewPage(base.RootPage(
|
||||||
ctx,
|
ctx,
|
||||||
h.Div(
|
h.Div(
|
||||||
h.Class("flex flex-col md:flex-row gap-6 justify-center overflow-x-hidden"),
|
h.Class("flex flex-col md:flex-row gap-6 justify-center overflow-x-hidden md:overflow-x-visible"),
|
||||||
h.Aside(
|
h.Aside(
|
||||||
h.Class("md:h-screen md:sticky md:top-0 md:w-42"), // Applied sticky positioning here
|
h.Class("md:h-screen md:sticky md:top-0 md:w-42"), // Applied sticky positioning here
|
||||||
partials.DocSidebar(pages),
|
partials.DocSidebar(pages),
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue