summaryrefslogtreecommitdiffstatshomepage
path: root/www/examples
diff options
context:
space:
mode:
Diffstat (limited to 'www/examples')
-rw-r--r--www/examples/active-search.md22
-rw-r--r--www/examples/bulk-update.md20
-rw-r--r--www/examples/click-to-edit.md16
-rw-r--r--www/examples/click-to-load.md16
-rw-r--r--www/examples/infinite-scroll.md14
-rw-r--r--www/examples/inline-validation.md26
-rw-r--r--www/examples/lazy-load.md12
-rw-r--r--www/examples/progress-bar.md38
-rw-r--r--www/examples/value-select.md6
9 files changed, 85 insertions, 85 deletions
diff --git a/www/examples/active-search.md b/www/examples/active-search.md
index fa39e541..7f2b7cbd 100644
--- a/www/examples/active-search.md
+++ b/www/examples/active-search.md
@@ -11,16 +11,16 @@ We start with a search input and an empty table:
```html
<h3>
Search Contacts
- <span class="kutty-indicator">
+ <span class="htmx-indicator">
<img src="/img/bars.svg"/> Searching...
</span>
</h3>
<input class="form-control" type="text"
name="search" placeholder="Begin Typing To Search Users..."
- kt-post="/search"
- kt-trigger="keyup changed delay:500ms"
- kt-target="#search-results"
- kt-indicator=".kutty-indicator">
+ hx-post="/search"
+ hx-trigger="keyup changed delay:500ms"
+ hx-target="#search-results"
+ hx-indicator=".htmx-indicator">
<table class="table">
<thead>
@@ -41,7 +41,7 @@ We add the `delay:500ms` modifier to the trigger to delay sending the query unti
we add the `changed` modifier to the trigger to ensure we don't send new queries when the user doesn't change the
value of the input (e.g. they hit an arrow key).
-Finally, we show an indicator when the search is in flight with the `kt-indicator` attribute.
+Finally, we show an indicator when the search is in flight with the `hx-indicator` attribute.
{% include demo_ui.html.liquid %}
@@ -67,17 +67,17 @@ Finally, we show an indicator when the search is in flight with the `kt-indicato
function searchUI() {
return ` <h3>
Search Contacts
-<span class="kutty-indicator">
+<span class="htmx-indicator">
<img src="/img/bars.svg"/> Searching...
</span>
</h3>
<input class="form-control" type="text"
name="search" placeholder="Begin Typing To Search Users..."
- kt-post="/search"
- kt-trigger="keyup changed delay:500ms"
- kt-target="#search-results"
- kt-indicator=".kutty-indicator">
+ hx-post="/search"
+ hx-trigger="keyup changed delay:500ms"
+ hx-target="#search-results"
+ hx-indicator=".htmx-indicator">
<table class="table">
<thead>
diff --git a/www/examples/bulk-update.md b/www/examples/bulk-update.md
index fb12fe09..072d157f 100644
--- a/www/examples/bulk-update.md
+++ b/www/examples/bulk-update.md
@@ -9,9 +9,9 @@ accomplished by putting a form around a table, with checkboxes in the table, and
values in `POST`'s to two different endpoints: `activate` and `deactivate`:
```html
-<div kt-include="#checked-contacts" kt-target="#tbody">
- <a class="btn" kt-put="/activate">Activate</a>
- <a class="btn" kt-put="/deactivate">Deactivate</a>
+<div hx-include="#checked-contacts" hx-target="#tbody">
+ <a class="btn" hx-put="/activate">Activate</a>
+ <a class="btn" hx-put="/deactivate">Deactivate</a>
</div>
<form id="checked-contacts">
@@ -42,10 +42,10 @@ updated rows. It will apply the class `activate` or `deactivate` to rows that h
us to use a bit of CSS to flash a color helping the user see what happened:
```css
- .kutty-settling tr.deactivate td {
+ .htmx-settling tr.deactivate td {
background: lightcoral;
}
- .kutty-settling tr.activate td {
+ .htmx-settling tr.activate td {
background: darkseagreen;
}
tr td {
@@ -56,10 +56,10 @@ us to use a bit of CSS to flash a color helping the user see what happened:
You can see a working examle of this code below.
<style scoped="">
- .kutty-settling tr.deactivate td {
+ .htmx-settling tr.deactivate td {
background: lightcoral;
}
- .kutty-settling tr.activate td {
+ .htmx-settling tr.activate td {
background: darkseagreen;
}
tr td {
@@ -127,9 +127,9 @@ You can see a working examle of this code below.
// templates
function displayUI(contacts) {
- return `<div kt-include="#checked-contacts" kt-target="#tbody">
- <a class="btn" kt-put="/activate">Activate</a>
- <a class="btn" kt-put="/deactivate">Deactivate</a>
+ return `<div hx-include="#checked-contacts" hx-target="#tbody">
+ <a class="btn" hx-put="/activate">Activate</a>
+ <a class="btn" hx-put="/deactivate">Deactivate</a>
</div>
<form id="checked-contacts">
diff --git a/www/examples/click-to-edit.md b/www/examples/click-to-edit.md
index 189a18b3..e61946c6 100644
--- a/www/examples/click-to-edit.md
+++ b/www/examples/click-to-edit.md
@@ -9,11 +9,11 @@ The click to edit pattern provides a way to offer inline editing of all or part
* This pattern starts with a UI that shows the details of a contact. The div has a button that will get the editing UI for the contact from `/contacts/1/edit`
```html
-<div kt-target="this" kt-swap="outerHTML">
+<div hx-target="this" hx-swap="outerHTML">
<div><label>First Name</label>: Joe</div>
<div><label>Last Name</label>: Blow</div>
<div><label>Email</label>: joe@blow.com</div>
- <button kt-get="/contact/1/edit" class="btn btn-primary">
+ <button hx-get="/contact/1/edit" class="btn btn-primary">
Click To Edit
</button>
</div>
@@ -22,7 +22,7 @@ The click to edit pattern provides a way to offer inline editing of all or part
* This returns a form that can be used to edit the contact
```html
-<form kt-put="/contact/1" kt-target="this" kt-swap="outerHTML">
+<form hx-put="/contact/1" hx-target="this" hx-swap="outerHTML">
<div>
<label>First Name</label>
<input type="text" name="firstName" value="Joe">
@@ -36,7 +36,7 @@ The click to edit pattern provides a way to offer inline editing of all or part
<input type="email" name="email" value="joe@blow.com">
</div>
<button class="btn">Submit</button>
- <button class="btn" kt-get="/contact/1">Cancel</button>
+ <button class="btn" hx-get="/contact/1">Cancel</button>
</form>
```
@@ -74,7 +74,7 @@ The click to edit pattern provides a way to offer inline editing of all or part
// templates
function formTemplate(contact) {
-return `<form kt-put="/contact/1" kt-target="this" kt-swap="outerHTML">
+return `<form hx-put="/contact/1" hx-target="this" hx-swap="outerHTML">
<div>
<label>First Name</label>
<input type="text" name="firstName" value="${contact.firstName}">
@@ -88,16 +88,16 @@ return `<form kt-put="/contact/1" kt-target="this" kt-swap="outerHTML">
<input type="email" name="email" value="${contact.email}">
</div>
<button class="btn">Submit</button>
- <button class="btn" kt-get="/contact/1">Cancel</button>
+ <button class="btn" hx-get="/contact/1">Cancel</button>
</form>`
}
function displayTemplate(contact) {
- return `<div kt-target="this" kt-swap="outerHTML">
+ return `<div hx-target="this" hx-swap="outerHTML">
<div><label>First Name</label>: ${contact.firstName}</div>
<div><label>Last Name</label>: ${contact.lastName}</div>
<div><label>Email</label>: ${contact.email}</div>
- <button kt-get="/contact/1/edit" class="btn btn-primary">
+ <button hx-get="/contact/1/edit" class="btn btn-primary">
Click To Edit
</button>
</div>`;
diff --git a/www/examples/click-to-load.md b/www/examples/click-to-load.md
index 19190fdf..72ff0d38 100644
--- a/www/examples/click-to-load.md
+++ b/www/examples/click-to-load.md
@@ -10,10 +10,10 @@ the final row:
```html
<tr id="replaceMe">
<td colspan="3">
- <button class='btn' kt-get="/contacts/?page=2"
- kt-target="#replaceMe"
- kt-swap="outerHTML">
- Load More Agents... <img class="kutty-indicator" src="/img/bars.svg">
+ <button class='btn' hx-get="/contacts/?page=2"
+ hx-target="#replaceMe"
+ hx-swap="outerHTML">
+ Load More Agents... <img class="htmx-indicator" src="/img/bars.svg">
</button>
</td>
</tr>
@@ -83,10 +83,10 @@ results (which will contain a button to load the *next* page of results). And s
return `<tr id="replaceMe">
<td colspan="3">
<center>
- <button class='btn' kt-get="/contacts/?page=${page + 1}"
- kt-target="#replaceMe"
- kt-swap="outerHTML">
- Load More Agents... <img class="kutty-indicator" src="/img/bars.svg">
+ <button class='btn' hx-get="/contacts/?page=${page + 1}"
+ hx-target="#replaceMe"
+ hx-swap="outerHTML">
+ Load More Agents... <img class="htmx-indicator" src="/img/bars.svg">
</button>
</center>
</td>
diff --git a/www/examples/infinite-scroll.md b/www/examples/infinite-scroll.md
index 2cdc0fb8..2b71e080 100644
--- a/www/examples/infinite-scroll.md
+++ b/www/examples/infinite-scroll.md
@@ -2,16 +2,16 @@
layout: demo_layout.njk
---
-## Kutty Pattern: Infinite scroll
+## Htmx Pattern: Infinite scroll
The infinite scroll pattern provides a way to load content dynamically on user scrolling action.
Let's focus on the final row:
```html
-<tr kt-get="/contacts/?page=2"
- kt-trigger="revealed"
- kt-swap="afterend">
+<tr hx-get="/contacts/?page=2"
+ hx-trigger="revealed"
+ hx-swap="afterend">
<td>Agent Smith</td>
<td>void29@null.org</td>
<td>55F49448C0</td>
@@ -65,9 +65,9 @@ The last element of the results will itself contain the listener to load the *ne
// templates
function tableTemplate(contacts) {
- return `<table kt-indicator=".kutty-indicator"><thead><tr><th>Name</th><th>Email</th><th>ID</th></tr></thead><tbody>
+ return `<table hx-indicator=".htmx-indicator"><thead><tr><th>Name</th><th>Email</th><th>ID</th></tr></thead><tbody>
${rowsTemplate(1, contacts)}
- </tbody></table><center><img class="kutty-indicator" width="60" src="/img/bars.svg"></center>`
+ </tbody></table><center><img class="htmx-indicator" width="60" src="/img/bars.svg"></center>`
}
function rowsTemplate(page, contacts) {
@@ -78,7 +78,7 @@ The last element of the results will itself contain the listener to load the *ne
var c = contacts[i];
if (i == (contacts.length - 1)) {
- trigger_attributes = ` kt-get="/contacts/?page=${page + 1}" kt-trigger="revealed" kt-swap="afterend"`
+ trigger_attributes = ` hx-get="/contacts/?page=${page + 1}" hx-trigger="revealed" hx-swap="afterend"`
}
txt += "<tr" + trigger_attributes +"><td>" + c.name + "</td><td>" + c.email + "</td><td>" + c.id + "</td></tr>\n";
diff --git a/www/examples/inline-validation.md b/www/examples/inline-validation.md
index 492edfa6..c303ebdd 100644
--- a/www/examples/inline-validation.md
+++ b/www/examples/inline-validation.md
@@ -12,11 +12,11 @@ We start with this form:
```html
<h3>Signup Form</h3>
-<form kt-post="/contact">
- <div kt-target="this" kt-swap="outerHTML">
+<form hx-post="/contact">
+ <div hx-target="this" hx-swap="outerHTML">
<label>Email Address</label>
- <input name="email" kt-post="/contact/email" kt-indicator="#ind">
- <img id="ind" src="/img/bars.svg" class="kutty-indicator"/>
+ <input name="email" hx-post="/contact/email" hx-indicator="#ind">
+ <img id="ind" src="/img/bars.svg" class="htmx-indicator"/>
</div>
<div class="form-group">
<label>First Name</label>
@@ -37,10 +37,10 @@ It also specifies an indicator for the request.
When a request occurs, it will return a partial to replace the outer div. It might look like this:
```html
-<div kt-target="this" kt-swap="outerHTML" class="error">
+<div hx-target="this" hx-swap="outerHTML" class="error">
<label>Email Address</label>
- <input name="email" kt-post="/contact/email" kt-indicator="#ind" value="test@foo.com">
- <img id="ind" src="/img/bars.svg" class="kutty-indicator"/>
+ <input name="email" hx-post="/contact/email" hx-indicator="#ind" value="test@foo.com">
+ <img id="ind" src="/img/bars.svg" class="htmx-indicator"/>
<div class='error-message'>That email is already taken. Please enter another email.</div>
</div>
```
@@ -108,10 +108,10 @@ Below is a working demo of this example. The only email that will be accepted i
// templates
function formTemplate(page) {
return `<h3>Signup Form</h3><form ic-post-to="/contact">
- <div kt-target="this" kt-swap="outerHTML">
+ <div hx-target="this" hx-swap="outerHTML">
<label>Email Address</label>
- <input name="email" kt-get="/contact/email" kt-indicator="#ind">
- <img id="ind" src="/img/bars.svg" class="kutty-indicator"/>
+ <input name="email" hx-get="/contact/email" hx-indicator="#ind">
+ <img id="ind" src="/img/bars.svg" class="htmx-indicator"/>
</div>
<div class="form-group">
<label>First Name</label>
@@ -126,10 +126,10 @@ Below is a working demo of this example. The only email that will be accepted i
}
function emailInputTemplate(val, errorMsg) {
- return `<div kt-target="this" kt-swap="outerHTML" class="${errorMsg ? "error" : "valid"}">
+ return `<div hx-target="this" hx-swap="outerHTML" class="${errorMsg ? "error" : "valid"}">
<label>Email Address</label>
- <input name="email" kt-get="/contact/email" kt-indicator="#ind" value="${val}">
- <img id="ind" src="/img/bars.svg" class="kutty-indicator"/>
+ <input name="email" hx-get="/contact/email" hx-indicator="#ind" value="${val}">
+ <img id="ind" src="/img/bars.svg" class="htmx-indicator"/>
${errorMsg ? ("<div class='error-message'>" + errorMsg + "</div>") : ""}
</div>`;
}
diff --git a/www/examples/lazy-load.md b/www/examples/lazy-load.md
index 0fe87202..806e414c 100644
--- a/www/examples/lazy-load.md
+++ b/www/examples/lazy-load.md
@@ -8,8 +8,8 @@ This example shows how to lazily load an element on a page. We start with an in
state that looks like this:
```html
-<div kt-get="/graph" kt-trigger="load">
- <img class="kutty-indicator" width="150" src="/img/bars.svg"/>
+<div hx-get="/graph" hx-trigger="load">
+ <img class="htmx-indicator" width="150" src="/img/bars.svg"/>
</div>
```
@@ -17,7 +17,7 @@ Which shows a progress indicator as we are loading the graph. The graph is then
loaded and faded gently into view via a settling CSS transition:
```css
-.kutty-settling img {
+.htmx-settling img {
opacity: 0;
}
img {
@@ -26,7 +26,7 @@ img {
```
<style>
-.kutty-settling img {
+.htmx-settling img {
opacity: 0;
}
img {
@@ -54,8 +54,8 @@ img {
// templates
function lazyTemplate(page) {
- return `<div kt-get="/graph" kt-trigger="load">
- <img class="kutty-indicator" width="120" src="/img/bars.svg"/>
+ return `<div hx-get="/graph" hx-trigger="load">
+ <img class="htmx-indicator" width="120" src="/img/bars.svg"/>
</div>`;
}
</script>
diff --git a/www/examples/progress-bar.md b/www/examples/progress-bar.md
index 1c195a8b..de56e84d 100644
--- a/www/examples/progress-bar.md
+++ b/www/examples/progress-bar.md
@@ -9,9 +9,9 @@ This example shows how to implement a smoothly scrolling progress bar.
We start with an intial state with a button that issues a `POST` to `/start` to begin the job:
```html
-<div kt-target="this" kt-swap="outerHTML">
+<div hx-target="this" hx-swap="outerHTML">
<h3>Start Progress</h3>
- <button class="btn" kt-post="/start">
+ <button class="btn" hx-post="/start">
Start Job
</button>
</div>
@@ -20,10 +20,10 @@ We start with an intial state with a button that issues a `POST` to `/start` to
This div is then replaced with a new div that reloads itself every 600ms:
```html
-<div kt-target="this"
- kt-get="/job"
- kt-trigger="load delay:600ms"
- kt-swap="outerHTML">
+<div hx-target="this"
+ hx-get="/job"
+ hx-trigger="load delay:600ms"
+ hx-swap="outerHTML">
<h3>Running</h3>
<div class="progress">
<div id="pb" class="progress-bar" style="width:0%">
@@ -31,23 +31,23 @@ This div is then replaced with a new div that reloads itself every 600ms:
</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, kutty will smoothly transition between requests by settling the
+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
rather than jumpy.
Finally, when the process is complete, a restart button is added to the UI:
```html
-<div kt-target="this"
- kt-get="/job"
- kt-trigger="none"
- kt-swap="outerHTML">
+<div hx-target="this"
+ hx-get="/job"
+ hx-trigger="none"
+ hx-swap="outerHTML">
<h3>Complete</h3>
<div class="progress">
<div id="pb" class="progress-bar" style="width:100%">
</div>
</div>
-<button id="restart-btn" class="btn" kt-post="/start" kt-classes="add show:600ms">
+<button id="restart-btn" class="btn" hx-post="/start" hx-classes="add show:600ms">
Restart Job
</button>
```
@@ -109,19 +109,19 @@ Finally, when the process is complete, a restart button is added to the UI:
// templates
function startButton(message) {
- return `<div kt-target="this" kt-swap="outerHTML">
+ return `<div hx-target="this" hx-swap="outerHTML">
<h3>${message}</h3>
- <button class="btn" kt-post="/start">
+ <button class="btn" hx-post="/start">
Start Job
</button>
</div>`;
}
function jobStatusTemplate(job) {
- return `<div kt-target="this"
- kt-get="/job"
- kt-trigger="${job.complete ? 'none' : 'load delay:600ms'}"
- kt-swap="outerHTML">
+ return `<div hx-target="this"
+ hx-get="/job"
+ hx-trigger="${job.complete ? 'none' : 'load delay:600ms'}"
+ hx-swap="outerHTML">
<h3>${job.complete ? "Complete" : "Running"}</h3>
<div class="progress">
<div id="pb" class="progress-bar" style="width:${job.percentComplete}%">
@@ -132,7 +132,7 @@ ${restartButton(job)}`;
function restartButton(job) {
if(job.complete){
- return `<button id="restart-btn" class="btn" kt-post="/start" kt-classes="add show:600ms">
+ return `<button id="restart-btn" class="btn" hx-post="/start" hx-classes="add show:600ms">
Restart Job
</button>`
} else {
diff --git a/www/examples/value-select.md b/www/examples/value-select.md
index 07e4205a..06a4e192 100644
--- a/www/examples/value-select.md
+++ b/www/examples/value-select.md
@@ -14,7 +14,7 @@ Here is the code:
```html
<div>
<label >Make</label>
- <select name="make" kt-get="/models" kt-target="#models" kt-indicator=".kutty-indicator">
+ <select name="make" hx-get="/models" hx-target="#models" hx-indicator=".htmx-indicator">
<option value="audi">Audi</option>
<option value="toyota">Toyota</option>
<option value="bmw">BMW</option>
@@ -63,7 +63,7 @@ And they become available in the `model` select.
<form>
<div>
<label >Make</label>
- <select name="make" kt-get="/models" kt-target="#models" kt-indicator=".kutty-indicator">
+ <select name="make" hx-get="/models" hx-target="#models" hx-indicator=".htmx-indicator">
<option value="audi">Audi</option>
<option value="toyota">Toyota</option>
<option value="bmw">BMW</option>
@@ -76,7 +76,7 @@ And they become available in the `model` select.
<option value="a3">A3</option>
<option value="a6">A6</option>
</select>
- <img class="kutty-indicator" width="20" src="/img/bars.svg">
+ <img class="htmx-indicator" width="20" src="/img/bars.svg">
</div>
</form>`;
}
generated by cgit v1.2.3 (git 2.39.1) at 2025-05-31 13:06:44 +0000