docs(TabStrip): add tabstrip dynamic routes KB

Author: filipKovachev

knowledge-base/examples/tabstrip-dynamic-routes/TabOne.vue

@@ -0,0 +1,10 @@
+<template>
+    <article>This is tab 1!</article>
+  </template>
+  
+  <script>
+  export default {
+    name: 'TabOne',
+  };
+  </script>
+  

knowledge-base/examples/tabstrip-dynamic-routes/TabTwo.vue

@@ -0,0 +1,10 @@
+<template>
+    <article>This is tab 2!</article>
+  </template>
+  
+  <script>
+  export default {
+    name: 'TabTwo',
+  };
+  </script>
+  

knowledge-base/examples/tabstrip-dynamic-routes/main.js

@@ -0,0 +1,25 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+import TabOne from './TabOne.vue';
+import TabTwo from './TabTwo.vue';
+import { createRouter, createWebHistory } from 'vue-router';
+
+const routes = [
+  {
+    path: '/tab1',
+    name: 'Tab1',
+    component: TabOne,
+  },
+  {
+    path: '/tab2',
+    name: 'Tab2',
+    component: TabTwo,
+  },
+];
+
+const router = createRouter({
+  routes,
+  history: createWebHistory(),
+});
+
+createApp(App).use(router).mount('#app');

knowledge-base/examples/tabstrip-dynamic-routes/main.vue

@@ -0,0 +1,59 @@
+<template>
+    <TabStrip
+      :selected="selected"
+      :animation="false"
+      @select="onSelect"
+      :tabs="tabs"
+    >
+      <template #content>
+        <RouterView v-slot="slotProps">
+          <Component :is="slotProps.Component" />
+        </RouterView>
+      </template>
+    </TabStrip>
+  </template>
+  
+  <script>
+  import { ref, watchEffect } from 'vue';
+  import { TabStrip } from '@progress/kendo-vue-layout';
+  import { RouterView, useRouter, useRoute } from 'vue-router';
+  
+  export default {
+    components: {
+      TabStrip,
+      RouterView,
+    },
+    setup() {
+      const route = useRoute();
+      const router = useRouter();
+      const selected = ref(0);
+      const tabs = [
+        {
+          title: 'Tab 1',
+          content: 'content',
+          pathName: 'Tab1',
+        },
+        {
+          title: 'Tab 2',
+          content: 'content',
+          pathName: 'Tab2',
+        },
+      ];
+      watchEffect(() => {
+        selected.value = tabs.findIndex((tab) => tab.pathName === route.name);
+      });
+      function onSelect(event) {
+        router.push({
+          name: tabs[event.selected].pathName,
+        });
+      }
+  
+      return {
+        selected,
+        tabs,
+        onSelect,
+      };
+    },
+  };
+  </script>
+  

knowledge-base/tabstrip-dynamic-routes.md

@@ -0,0 +1,40 @@
+---
+title: Add dynamic routes to the TabStrip
+description: An example on how to add dynamic routes to the TabStrip
+type: how-to
+page_title: Add Dynamic Routes to the TabStrip - Kendo UI for Vue Native TabStrip
+slug: tabstrip-add-dynamic-routes
+tags: tabstrip, routes, dynamic, kendovue
+res_type: kb
+category: knowledge-base
+---
+
+## Environment
+
+<table>
+    <tbody>
+	    <tr>
+	    	<td>Product Version</td>
+	    	<td>4.3.1</td>
+	    </tr>
+	    <tr>
+	    	<td>Product</td>
+	    	<td>Progress® Kendo UI for Vue Native</td>
+	    </tr>
+    </tbody>
+</table>
+
+## Description
+
+This Knowledge base(KB) article shows how you can set dynamic routes to the TabStrip component.
+
+## Solution
+
+This can be achieved by binding the selected tab to the current route, users can navigate between tabs with their content dynamically loaded based on the URL.
+
+{% meta id:index height:400 %}
+{% embed_file tabstrip-dynamic-routes/main.vue preview %}
+{% embed_file tabstrip-dynamic-routes/main.js %}
+{% embed_file tabstrip-dynamic-routes/TabOne.vue %}
+{% embed_file tabstrip-dynamic-routes/TabTwo.vue %}
+{% endmeta %}