feat: update docs
This commit is contained in:
@@ -127,3 +127,32 @@ defineProps({
|
|||||||
},
|
},
|
||||||
})
|
})
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## Tab pane interaction
|
||||||
|
|
||||||
|
You can add @click:pane to Tabs component to intercept click on tab pane.
|
||||||
|
```typescript
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { Tabs, Tab } from 'flowbite-vue'
|
||||||
|
function handlePaneClick(): void {
|
||||||
|
console.log("Click!")
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<tabs variant="pills" v-model="activeTab" class="p-5" @click:pane="handlePaneClick">
|
||||||
|
<tab name="first" title="First">
|
||||||
|
Lorem...
|
||||||
|
</tab>
|
||||||
|
<tab name="second" title="Second">
|
||||||
|
Lorem...
|
||||||
|
</tab>
|
||||||
|
<tab name="third" title="Third">
|
||||||
|
Lorem...
|
||||||
|
</tab>
|
||||||
|
<tab name="fourth" title="Fourth" :disabled="true">
|
||||||
|
Lorem...
|
||||||
|
</tab>
|
||||||
|
</tabs>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
Reference in New Issue
Block a user