docs(kslideout): adds title slot example

Signed-off-by: Philipp Rudloff <philipp.rudloff@konghq.com>
Kong · Dec 15, 2023 · 6c692bf · 6c692bf
1 parent 92810b9
commit 6c692bf
Showing 1 changed file with 38 additions and 0 deletions.
diff --git a/docs/components/slideout.md b/docs/components/slideout.md
@@ -295,6 +295,44 @@ Used to customize the header to add content before title.
 
 Used to place title content into the header area.
 
+<KToggle v-slot="{ isToggled, toggle }">
+  <div>
+    <KButton @click="toggle">Toggle Panel With Title</KButton>
+    <KSlideout :is-visible="isToggled.value" @close="toggle" :has-overlay="false" close-button-alignment="end">
+      <template #before-title>
+        <KIcon icon="kong" />
+      </template>
+      <template #title>
+        <router-link to="route">Title</router-link>
+      </template>
+      <template #after-title>
+        <KIcon icon="check" />
+      </template>
+      Default content
+    </KSlideout>
+  </div>
+</KToggle>
+
+```html
+<KToggle v-slot="{ isToggled, toggle }">
+  <div>
+    <KButton @click="toggle">Toggle Panel With Title</KButton>
+    <KSlideout :is-visible="isToggled.value" @close="toggle" :has-overlay="false" close-button-alignment="end">
+      <template #before-title>
+        <KIcon icon="kong" />
+      </template>
+      <template #title>
+        <router-link to="route">Title</router-link>
+      </template>
+      <template #after-title>
+        <KIcon icon="check" />
+      </template>
+      Default content
+    </KSlideout>
+  </div>
+</KToggle>
+```
+
 ### after-title
 
 Used to customize the header to add content after title.