Skip to content

Commit b19e2f7

Browse files
1cg1cg
committed
add moveBefore() demo
1 parent 52f8076 commit b19e2f7

File tree

1 file changed

+29
-28
lines changed

1 file changed

+29
-28
lines changed

‎www/content/examples/_index.md‎

Lines changed: 29 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -14,34 +14,35 @@ Below are a set of UX patterns implemented in htmx with minimal HTML and styling
1414

1515
You can copy and paste them and then adjust them for your needs.
1616

17-
| Pattern | Description |
18-
|-----------------------------------------------------------------------------|------------------------------------------------------------------------------------------------|
19-
| [Click To Edit](@/examples/click-to-edit.md) | Demonstrates inline editing of a data object |
20-
| [Bulk Update](@/examples/bulk-update.md) | Demonstrates bulk updating of multiple rows of data |
21-
| [Click To Load](@/examples/click-to-load.md) | Demonstrates clicking to load more rows in a table |
22-
| [Delete Row](@/examples/delete-row.md) | Demonstrates row deletion in a table |
23-
| [Edit Row](@/examples/edit-row.md) | Demonstrates how to edit rows in a table |
24-
| [Lazy Loading](@/examples/lazy-load.md) | Demonstrates how to lazy load content |
25-
| [Inline Validation](@/examples/inline-validation.md) | Demonstrates how to do inline field validation |
26-
| [Infinite Scroll](@/examples/infinite-scroll.md) | Demonstrates infinite scrolling of a page |
27-
| [Active Search](@/examples/active-search.md) | Demonstrates the active search box pattern |
28-
| [Progress Bar](@/examples/progress-bar.md) | Demonstrates a job-runner like progress bar |
29-
| [Value Select](@/examples/value-select.md) | Demonstrates making the values of a select dependent on another select |
30-
| [Animations](@/examples/animations.md) | Demonstrates various animation techniques |
31-
| [File Upload](@/examples/file-upload.md) | Demonstrates how to upload a file via ajax with a progress bar |
32-
| [Preserving File Inputs after Form Errors](@/examples/file-upload-input.md) | Demonstrates how to preserve file inputs after form errors |
33-
| [Dialogs - Browser](@/examples/dialogs.md) | Demonstrates the prompt and confirm dialogs |
34-
| [Dialogs - UIKit](@/examples/modal-uikit.md) | Demonstrates modal dialogs using UIKit |
35-
| [Dialogs - Bootstrap](@/examples/modal-bootstrap.md) | Demonstrates modal dialogs using Bootstrap |
36-
| [Dialogs - Custom](@/examples/modal-custom.md) | Demonstrates modal dialogs from scratch |
37-
| [Tabs (Using HATEOAS)](@/examples/tabs-hateoas.md) | Demonstrates how to display and select tabs using HATEOAS principles |
38-
| [Tabs (Using JavaScript)](@/examples/tabs-javascript.md) | Demonstrates how to display and select tabs using JavaScript |
39-
| [Keyboard Shortcuts](@/examples/keyboard-shortcuts.md) | Demonstrates how to create keyboard shortcuts for htmx enabled elements |
40-
| [Drag & Drop / Sortable](@/examples/sortable.md) | Demonstrates how to use htmx with the Sortable.js plugin to implement drag-and-drop reordering |
41-
| [Updating Other Content](@/examples/update-other-content.md) | Demonstrates how to update content beyond just the target elements |
42-
| [Confirm](@/examples/confirm.md) | Demonstrates how to implement a custom confirmation dialog with htmx |
43-
| [Async Authentication](@/examples/async-auth.md) | Demonstrates how to handle async authentication tokens in htmx |
44-
| [Web Components](@/examples/web-components.md) | Demonstrates how to integrate htmx with web components and shadow DOM |
17+
| Pattern | Description |
18+
|-----------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------|
19+
| [Click To Edit](@/examples/click-to-edit.md) | Demonstrates inline editing of a data object |
20+
| [Bulk Update](@/examples/bulk-update.md) | Demonstrates bulk updating of multiple rows of data |
21+
| [Click To Load](@/examples/click-to-load.md) | Demonstrates clicking to load more rows in a table |
22+
| [Delete Row](@/examples/delete-row.md) | Demonstrates row deletion in a table |
23+
| [Edit Row](@/examples/edit-row.md) | Demonstrates how to edit rows in a table |
24+
| [Lazy Loading](@/examples/lazy-load.md) | Demonstrates how to lazy load content |
25+
| [Inline Validation](@/examples/inline-validation.md) | Demonstrates how to do inline field validation |
26+
| [Infinite Scroll](@/examples/infinite-scroll.md) | Demonstrates infinite scrolling of a page |
27+
| [Active Search](@/examples/active-search.md) | Demonstrates the active search box pattern |
28+
| [Progress Bar](@/examples/progress-bar.md) | Demonstrates a job-runner like progress bar |
29+
| [Value Select](@/examples/value-select.md) | Demonstrates making the values of a select dependent on another select |
30+
| [Animations](@/examples/animations.md) | Demonstrates various animation techniques |
31+
| [File Upload](@/examples/file-upload.md) | Demonstrates how to upload a file via ajax with a progress bar |
32+
| [Preserving File Inputs after Form Errors](@/examples/file-upload-input.md) | Demonstrates how to preserve file inputs after form errors |
33+
| [Dialogs - Browser](@/examples/dialogs.md) | Demonstrates the prompt and confirm dialogs |
34+
| [Dialogs - UIKit](@/examples/modal-uikit.md) | Demonstrates modal dialogs using UIKit |
35+
| [Dialogs - Bootstrap](@/examples/modal-bootstrap.md) | Demonstrates modal dialogs using Bootstrap |
36+
| [Dialogs - Custom](@/examples/modal-custom.md) | Demonstrates modal dialogs from scratch |
37+
| [Tabs (Using HATEOAS)](@/examples/tabs-hateoas.md) | Demonstrates how to display and select tabs using HATEOAS principles |
38+
| [Tabs (Using JavaScript)](@/examples/tabs-javascript.md) | Demonstrates how to display and select tabs using JavaScript |
39+
| [Keyboard Shortcuts](@/examples/keyboard-shortcuts.md) | Demonstrates how to create keyboard shortcuts for htmx enabled elements |
40+
| [Drag & Drop / Sortable](@/examples/sortable.md) | Demonstrates how to use htmx with the Sortable.js plugin to implement drag-and-drop reordering |
41+
| [Updating Other Content](@/examples/update-other-content.md) | Demonstrates how to update content beyond just the target elements |
42+
| [Confirm](@/examples/confirm.md) | Demonstrates how to implement a custom confirmation dialog with htmx |
43+
| [Async Authentication](@/examples/async-auth.md) | Demonstrates how to handle async authentication tokens in htmx |
44+
| [Web Components](@/examples/web-components.md) | Demonstrates how to integrate htmx with web components and shadow DOM |
45+
| [(Experimental) moveBefore()-powered hx-preserve](@/examples/move-before) | htmx will use the experimental [`moveBefore()`](https://cr-status.appspot.com/feature/5135990159835136) API for moving elements, if it is present. |
4546

4647
## Migrating from Hotwire / Turbo ?
4748

0 commit comments

Comments
 (0)