From b8f057dd95c6c20e977e6c80f2c3cf7e30a23aac Mon Sep 17 00:00:00 2001
From: Khang <khang.nguyenduyvn@gmail.com>
Date: Thu, 10 Oct 2024 10:13:21 +0700
Subject: [PATCH] docs: tab change event example

---
 .../.vuepress/components/Demo/Tabs/Change.vue | 42 +++++++++++++++++++
 docs/src/components/tabs.md                   | 17 ++++++++
 2 files changed, 59 insertions(+)
 create mode 100644 docs/src/.vuepress/components/Demo/Tabs/Change.vue

diff --git a/docs/src/.vuepress/components/Demo/Tabs/Change.vue b/docs/src/.vuepress/components/Demo/Tabs/Change.vue
new file mode 100644
index 0000000..3fc4c5a
--- /dev/null
+++ b/docs/src/.vuepress/components/Demo/Tabs/Change.vue
@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <div style="margin-bottom: 12px">
+      Active tab: <code>{{ activeTab }}</code>
+    </div>
+    <winui-tabs :tabs="tabs" @change="handleChange">
+      <template #tab1>
+        <p>Content of the first tab</p>
+      </template>
+      <template #tab2>
+        <p>Content of the second tab</p>
+      </template>
+      <template #tab3>
+        <p>Content of the third tab</p>
+      </template>
+      <template #tab4>
+        <p>Content of the fourth tab</p>
+      </template>
+    </winui-tabs>
+  </div>
+</template>
+  
+  <script>
+export default {
+  data() {
+    return {
+      activeTab: "tab1",
+      tabs: {
+        tab1: "First tab",
+        tab2: "Second tab",
+        tab3: "Third tab",
+        tab4: "Fourth tab",
+      },
+    };
+  },
+  methods: {
+    handleChange(tabId) {
+      this.activeTab = tabId;
+    },
+  },
+};
+</script>
diff --git a/docs/src/components/tabs.md b/docs/src/components/tabs.md
index 50a0295..25e9cc5 100644
--- a/docs/src/components/tabs.md
+++ b/docs/src/components/tabs.md
@@ -30,6 +30,13 @@ The tabs to display. The `key` is the tab id and the value is the tab label. The
 
 Whether the tabs should be justified.
 
+### `@change` <Badge text="optional" type="tip" />
+
+- Type: `(tabId: string) => void`
+- Default: `undefined`
+
+The function to call when the active tab changes. The function will be called with the active tab ID as an argument.
+
 ## Customization
 
 Use the class name `.winui-tabs` to override/customize the component's styles.
@@ -46,4 +53,14 @@ Use the class name `.winui-tabs` to override/customize the component's styles.
 
 </Content-Example>
 
+### Listen to tab change
+
+<Content-Example>
+
+<div><Demo-Tabs-Change /></div>
+
+<<< @/src/.vuepress/components/Demo/Tabs/Change.vue
+
+</Content-Example>
+
 <Misc-Ad />