diff --git a/docs/components/tabs.md b/docs/components/tabs.md
index 8fa5c33..5d6c20b 100644
--- a/docs/components/tabs.md
+++ b/docs/components/tabs.md
@@ -127,3 +127,32 @@ defineProps({
},
})
```
+
+## Tab pane interaction
+
+You can add `@click:pane` to Tabs component to intercept click on tab pane.
+```vue
+
+
+
+
+ Lorem...
+
+
+ Lorem...
+
+
+ Lorem...
+
+
+ Lorem...
+
+
+
+```
\ No newline at end of file
diff --git a/src/components/Tabs/Tabs.vue b/src/components/Tabs/Tabs.vue
index ce49979..c958e3a 100644
--- a/src/components/Tabs/Tabs.vue
+++ b/src/components/Tabs/Tabs.vue
@@ -9,6 +9,7 @@
:name="item.props?.name"
:disabled="item.props?.disabled"
:title="item.props?.title"
+ @click="emitClick"
/>
@@ -46,7 +47,7 @@ const props = defineProps({
},
})
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue', 'click:pane'])
const { ulClasses, divClasses } = useTabsClasses(props)
@@ -71,11 +72,14 @@ const modelValueRef = computed({
provide(TAB_ACTIVE_NAME_INJECTION_KEY, modelValueRef)
provide(TAB_VISIBILITY_DIRECTIVE_INJECTION_KEY, toRef(props, 'directive'))
-
const onActivate = (value: string) => {
modelValueRef.value = value
}
+function emitClick(): void {
+ emit('click:pane')
+}
+
provide(TAB_ACTIVATE_INJECTION_KEY, onActivate)