tabs_hyperscript ok

librasteve · Nov 21, 2024 · 5b53050 · 5b53050
1 parent fed923f
commit 5b53050
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -10,8 +10,7 @@ Candidates for Fragments are:
 - [x] infinite_scroll
 - [x] value_select
 - [x] tabs_hateoas
-- [ ] tabs_hyperscript
-- [ ] updating_other_content
+- [x] tabs_hyperscript
 
 ---
 

diff --git a/lib/Routes/Examples/Tabs-Hyperscript.rakumod b/lib/Routes/Examples/Tabs-Hyperscript.rakumod
@@ -7,19 +7,19 @@ sub tabs_hyperscript-routes() is export {
         template-location 'templates/tabs_hyperscript';
 
         get -> {
-            template 'index.crotmp';
+            template 'index.crotmp', {:tab<tab1>};
         }
 
         get -> 'tab1' {
-            template 'tab1.crotmp';
+            template 'index.crotmp', :fragment<tabs>, {:tab<tab1>};
         }
 
         get -> 'tab2' {
-            template 'tab2.crotmp';
+            template 'index.crotmp', :fragment<tabs>, {:tab<tab2>};
         }
 
         get -> 'tab3' {
-            template 'tab3.crotmp';
+            template 'index.crotmp', :fragment<tabs>, {:tab<tab3>};
         }
     }
 }
diff --git a/templates/tabs_hyperscript/index.crotmp b/templates/tabs_hyperscript/index.crotmp
@@ -12,4 +12,33 @@
     <button role="tab" aria-controls="tab-content" aria-selected="false" hx-get="/tabs_hyperscript/tab3">Tab 3</button>
 </div>
 
-<div id="tab-contents" role="tabpanel" hx-get="/tabs_hyperscript/tab1" hx-trigger="load"></div>
+<div id="tab-contents">
+  <:fragment tabs($_)>
+    <div id="tab-content" role="tabpanel" class="tab-content">
+      <?{.tab eq 'tab1'}>
+        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.
+      </?>
+      <?{.tab eq 'tab2'}>
+        Kitsch fanny pack yr, farm-to-table cardigan cillum commodo reprehenderit plaid dolore cronut meditation.
+        Tattooed polaroid veniam, anim id cornhole hashtag sed forage.
+        Microdosing pug kitsch enim, kombucha pour-over sed irony forage live-edge.
+        Vexillologist eu nulla trust fund, street art blue bottle selvage raw denim.
+        Dolore nulla do readymade, est subway tile affogato hammock 8-bit.
+        Godard elit offal pariatur you probably haven't heard of them post-ironic.
+        Prism street art cray salvia.
+      </?>
+      <?{.tab eq 'tab3'}>
+        Aute chia marfa echo park tote bag hammock mollit artisan listicle direct trade.
+        Raw denim flexitarian eu godard etsy.
+        Poke tbh la croix put a bird on it fixie polaroid aute cred air plant four loko gastropub swag non brunch.
+        Iceland fanny pack tumeric magna activated charcoal bitters palo santo laboris quis consectetur cupidatat portland
+        aliquip venmo.
+      </?>
+    </div>
+  </:>
+</div>