docs: tab change event example

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>

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 />