itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-09-28 05:21:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

update docs

Browse Source
This commit is contained in:
carson 2020-05-21 10:37:25 -07:00
parent cb8f9b6f10
commit 4d9e39cc6e
2 changed files with 37 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
www/examples/delete-row.md
View File

@ -6,7 +6,7 @@ layout: demo_layout.njk
This example shows how to implement a delete button that removes a table row upon completion.
Each row has a button with a `kt-delete` attribute containing the url on which to issue a DELETE request to delete the row from the server.
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
@ -15,19 +15,19 @@ This request should respond with empty content.
<td>angie@macdowell.org</td>
<td>Active</td>
<td>
<button class="btn btn-danger" kt-delete="/contact/1">
<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 `kt-target` attribute set to `closest tr` . This will target the row containing the button which triggred the action, replacing it by... nothing.
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 `kt-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.
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 `kt-confirm` attribute so that a confirmation popup is shown before triggering the action for real.
Finally, the body also has a `hx-confirm` attribute so that a confirmation popup is shown before triggering the action for real.
```html
<table class="table delete-row-example">
@ -39,7 +39,7 @@ Finally, the body also has a `kt-confirm` attribute so that a confirmation popup
<th></th>
</tr>
</thead>
<tbody kt-confirm="Are you sure?" kt-target="closest tr" kt-swap="outerHTML swap:1s">
<tbody hx-confirm="Are you sure?" hx-target="closest tr" hx-swap="outerHTML swap:1s">
...
</tbody>
</table>
@ -92,7 +92,7 @@ Finally, the body also has a `kt-confirm` attribute so that a confirmation popup
<td>${contact["email"]}</td>
<td>${contact["status"]}</td>
<td>
<button class="btn btn-danger" kt-delete="/contact/${i}">
<button class="btn btn-danger" hx-delete="/contact/${i}">
Delete
</button>
</td>
@ -116,7 +116,7 @@ Finally, the body also has a `kt-confirm` attribute so that a confirmation popup
<th></th>
</tr>
</thead>
<tbody kt-confirm="Are you sure?" kt-target="closest tr" kt-swap="outerHTML swap:1s">
<tbody hx-confirm="Are you sure?" hx-target="closest tr" hx-swap="outerHTML swap:1s">
${rows}
</tbody>
</table>`;

29
www/examples/progress-bar.md
View File

@ -30,6 +30,7 @@ This div is then replaced with a new div that reloads itself every 600ms:
</div>
</div>
```
This HTML is rerendered every 600 milliseconds, with the "width" style attribute on the progress bar being updated.
Because there is an id on the progress bar div, htmx will smoothly transition between requests by settling the
style attribute into its new value. This, when coupled with CSS transitions, make the visual transition continuous
@ -52,6 +53,34 @@ Finally, when the process is complete, a restart button is added to the UI:
</button>
```
This example uses styling cribbed from the bootstrap progress bar:
```css
.progress {
height: 20px;
margin-bottom: 20px;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 4px;
box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}
.progress-bar {
float: left;
width: 0%;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
background-color: #337ab7;
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease;
}
```
{% include demo_ui.html.liquid %}
<style>