mirror of
https://github.com/bigskysoftware/htmx.git
synced 2025-10-01 23:11:12 +00:00
Merge branch 'master' into dev
# Conflicts: # www/docs.md
This commit is contained in:
carson
commit
7d1e42310d
10
www/docs.md
10
www/docs.md
@ -23,7 +23,7 @@ title: </> htmx - high power tools for html
|
||||
* [parameters](#parameters)
|
||||
* [history](#history)
|
||||
* [requests & responses](#requests)
|
||||
* [misc](#misc)
|
||||
* [miscellaneous](#miscellaneous)
|
||||
* [extensions](#extensions)
|
||||
* [events & logging](#events)
|
||||
* [configuring](#config)
|
||||
@ -362,10 +362,10 @@ event.
|
||||
Htmx provides a simple mechanism for interacting with the [browser history API](https://developer.mozilla.org/en-US/docs/Web/API/History_API):
|
||||
|
||||
If you want a given element to push its request URL into the browser navigation bar and add the current state of the page
|
||||
to the browser's history, include the [hx-push](/attributes/hx-push) attribute:
|
||||
to the browser's history, include the [hx-push-url](/attributes/hx-push-url) attribute:
|
||||
|
||||
```html
|
||||
<a hx-get="/blog" hx-push="true">Blog</a>
|
||||
<a hx-get="/blog" hx-push-url="true">Blog</a>
|
||||
```
|
||||
|
||||
When a user clicks on this link, htmx will snapshot the current DOM and store it before it makes a request to /blog.
|
||||
@ -377,7 +377,7 @@ When a user hits the back button, htmx will retrieve the old content from storag
|
||||
### Specifying History Snapshot Element
|
||||
|
||||
By default, htmx will use the `body` to take and restore the history snapshop from. This is usually the right thing, but
|
||||
if you want to use a narrower element for snapshotting you can use the [hx-history-element](/attributes/hx-history-element)
|
||||
if you want to use a narrower element for snapshotting you can use the [hx-history-elt](/attributes/hx-history-elt)
|
||||
attribute to specify a different one.
|
||||
|
||||
Careful: this element will need to be on all pages or restoring from history won't work reliably.
|
||||
@ -439,7 +439,7 @@ The order of operations in a htmx request are:
|
||||
You can use the `htmx-swapping` and `htmx-settling` classes to create
|
||||
[CSS transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) between pages.
|
||||
|
||||
## Miscellaneous Attributes
|
||||
## <a name="miscellaneous"></a> [Miscellaneous](#miscellaneous)
|
||||
|
||||
In addition to the core AJAX functionality, htmx also has a few other tricks up its sleeve that help you build
|
||||
nice interfaces without javascript.
|
||||
|
||||
@ -4,30 +4,8 @@ layout: demo_layout.njk
|
||||
|
||||
## Delete Row
|
||||
|
||||
This example shows how to implement a delete button that removes a table row upon completion.
|
||||
|
||||
Each row has a button with a `hx-delete` attribute containing the url on which to issue a DELETE request to delete the row from the server.
|
||||
This request should respond with empty content.
|
||||
|
||||
```html
|
||||
<tr>
|
||||
<td>Angie MacDowell</td>
|
||||
<td>angie@macdowell.org</td>
|
||||
<td>Active</td>
|
||||
<td>
|
||||
<button class="btn btn-danger" hx-delete="/contact/1">
|
||||
Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
```
|
||||
|
||||
In order to tell where to put this empty content, the table body has an `hx-target` attribute set to `closest tr` . This will target the row containing the button which triggred the action, replacing it by... nothing.
|
||||
|
||||
It also has a `hx-swap` attribute set to `outerHTML 1s` in order to replace the row itself, with a 1 second delay allowing for a CSS3 transition to fade the row out.
|
||||
During this one second delay, the class "kutty-swapping" is added to `tr` element about to be replaced.
|
||||
|
||||
Finally, the body also has a `hx-confirm` attribute so that a confirmation popup is shown before triggering the action for real.
|
||||
This example shows how to implement a delete button that removes a table row upon completion. First let's look at the
|
||||
table body:
|
||||
|
||||
```html
|
||||
<table class="table delete-row-example">
|
||||
@ -45,6 +23,45 @@ Finally, the body also has a `hx-confirm` attribute so that a confirmation popup
|
||||
</table>
|
||||
```
|
||||
|
||||
The table body has a [`hx-confirm`](/attributes/hx-confirm) attribute to confirm the delete action. It also
|
||||
set the target to be the `closest tr` that is, the closest table row, for all the buttons ([`hx-target`](/attributes/hx-target)
|
||||
is inherited from parents in the DOM.) The swap specification in [`hx-swap`](/attributes/hx-swap) says to swap the
|
||||
entire target out and to wait 1 second after receiving a response. This last bit is so that we can use the following
|
||||
CSS:
|
||||
|
||||
```css
|
||||
tr.htmx-swapping td {
|
||||
opacity: 0;
|
||||
transition: opacity 1s ease-out;
|
||||
}
|
||||
```
|
||||
|
||||
To fade the row out before it is swapped/removed.
|
||||
|
||||
Each row has a button with a [`hx-delete`](/attributes/hx-delete) attribute containing the url on which to issue a `DELETE`
|
||||
request to delete the row from the server. This request responds with empty content, indicating that the row should
|
||||
be replaced with nothing.
|
||||
|
||||
```html
|
||||
<tr>
|
||||
<td>Angie MacDowell</td>
|
||||
<td>angie@macdowell.org</td>
|
||||
<td>Active</td>
|
||||
<td>
|
||||
<button class="btn btn-danger" hx-delete="/contact/1">
|
||||
Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
```
|
||||
|
||||
<style>
|
||||
tr.htmx-swapping td {
|
||||
opacity: 0;
|
||||
transition: opacity 1s ease-out;
|
||||
}
|
||||
</style>
|
||||
|
||||
{% include demo_ui.html.liquid %}
|
||||
|
||||
<script>
|
||||
@ -123,5 +140,3 @@ Finally, the body also has a `hx-confirm` attribute so that a confirmation popup
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user