adding description of the new link navigate options

tallstackui · Jul 5, 2024 · 4072fd2 · 4072fd2
1 parent b10049a
commit 4072fd2
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 24 deletions.
diff --git a/app/Enums/Examples/Ui/Link.php b/app/Enums/Examples/Ui/Link.php
@@ -113,6 +113,19 @@ class Link
             :color="null" />
     HTML;
 
+    public const NAVIGATE = <<<'HTML'
+    <!-- For `wire:navigate` -->
+    <x-link :href="route('route-name-goes-here')" 
+            text="Navigate" 
+            navigate />
+
+    <!-- For `wire:navigate.hover` -->
+    <x-link :href="route('route-name-goes-here')" 
+            text="Navigate Hover" 
+            navigate-hover />
+    HTML;
+
+
     public const PERSONALIZATION = <<<'HTML'
     TallStackUi::personalize()
         ->link()

diff --git a/composer.lock b/composer.lock
diff --git a/contents/on-this-page.json b/contents/on-this-page.json
@@ -312,7 +312,8 @@
         "3": "Target Blank & Style Options",
         "4": "Query String & Fragment Options",
         "5": "Color Variations",
-        "6": "Without Color"
+        "6": "Without Color",
+        "7": "Livewire SPA Navigation"
     },
     "docs.ui.loading": {
         "0": "Concept",

diff --git a/resources/views/documentation/ui/link.blade.php b/resources/views/documentation/ui/link.blade.php
@@ -105,4 +105,12 @@
             </div>
         </x-preview>
     </x-section>
+    <x-section title="Livewire SPA Navigation" description="An option to easily add Livewire 3 navigation effects in SPA mode." new>
+        <x-preview language="blade" :contents="$navigate">
+            <div class="flex flex-col gap-x-2">
+                <x-link :href="route('documentation.ui.link')" text="Navigate" navigate />
+                <x-link :href="route('documentation.ui.link')" text="Navigate Hover" navigate-hover />
+            </div>
+        </x-preview>
+    </x-section>
 </x-layout>