diff --git a/www/examples.md b/www/examples.md index d15fb923..9ba15811 100644 --- a/www/examples.md +++ b/www/examples.md @@ -25,5 +25,7 @@ You can copy and paste them and then adjust them for your needs. | [Dialogs - Browser](/examples/dialogs) | Demonstrates the prompt and confirm dialogs | [Dialogs - UIKIt](/examples/modal-uikit) | Demonstrates modal dialogs using UIKit | [Dialogs - Bootstrap](/examples/modal-bootstrap) | Demonstrates modal dialogs using Bootstrap +| [Tabs (Using HATEOAS)](/examples/tabs-hateoas) | Demonstrates how to display and select tabs using HATEOAS principles +| [Tabs (Using Hyperscript)](/examples/tabs-hyperscript) | Demonstrates how to display and select tabs using Hyperscript | [File Upload](/examples/file-upload) | Demonstrates how to upload a file via ajax with a progress bar diff --git a/www/examples/tabs-hateoas.md b/www/examples/tabs-hateoas.md new file mode 100644 index 00000000..b55ade13 --- /dev/null +++ b/www/examples/tabs-hateoas.md @@ -0,0 +1,119 @@ +--- +layout: demo_layout.njk +--- + +## Tabs (Using HATEOAS) + +This example shows how easy it is to implement tabs using htmx. Following the principle of [Hypertext As The Engine Of Application State](https://en.wikipedia.org/wiki/HATEOAS), the selected tab is a part of the application state. Therefore, to display and select tabs in your application, simply include the tab markup in the returned HTML. If this does not suit your application server design, you can also use a little bit of [Javascript to select tabs instead](../tabs-javascript). + +### Example Code (Main Page) +The main page simply includes the following HTML to load the initial tab into the DOM. +```html +
+``` + +### Example Code (Each Tab) +Subsequent tab pages display all tabs and highlight the selected one accordingly. + +```html +
+ Tab 1 + Tab 2 + Tab 3 +
+ +
+ Commodo normcore truffaut VHS duis gluten-free keffiyeh iPhone taxidermy godard ramps anim pour-over. + Pitchfork vegan mollit umami quinoa aute aliquip kinfolk eiusmod live-edge cardigan ipsum locavore. + Polaroid duis occaecat narwhal small batch food truck. + PBR&B venmo shaman small batch you probably haven't heard of them hot chicken readymade. + Enim tousled cliche woke, typewriter single-origin coffee hella culpa. + Art party readymade 90's, asymmetrical hell of fingerstache ipsum. +
+``` + +{% include demo_ui.html.liquid %} + +
+ + + + + \ No newline at end of file diff --git a/www/examples/tabs-hyperscript.md b/www/examples/tabs-hyperscript.md new file mode 100644 index 00000000..1bad1a9e --- /dev/null +++ b/www/examples/tabs-hyperscript.md @@ -0,0 +1,93 @@ +--- +layout: demo_layout.njk +--- + +## Tabs (Using Hyperscript) + +This example shows how to load tab contents using htmx, and to select the "active" tab using Javascript. This reduces some duplication by offloading some of the work of re-rendering the tab HTML from your application server to your clients' browsers. + +You may also consider [a more idiomatic approach](../tabs-hateoas) that follows the principle of [Hypertext As The Engine Of Application State](https://en.wikipedia.org/wiki/HATEOAS).. + +### Example Code + +The HTML below displays a list of tabs, with added HTMX to dynamically load each tab pane from the server. A simple [hyperscript](https://hyperscript.org) event handler uses the [`take` command](https://hyperscript.org/commands/take/) to switch the selected tab when the content is swapped into the DOM. Alternatively, this could be accomplished with a slightly longer Javascript event handler. + +```html +
+ Tab 1 + Tab 2 + Tab 3 +
+ +
+``` + +{% include demo_ui.html.liquid %} + +
+ Tab 1 + Tab 2 + Tab 3 +
+ +
+ + + + + \ No newline at end of file