TxTabPanel · Vue · tecexpress

Tabs and their active content in one view.

Prop	Type	Default	Meaning
`dataSource`	`unknown`	`undefined`	List, configuration or DataSource instance; takes precedence over items.
`items`	`unknown`	`[]`	Entries; replaced by dataSource when bound.
`selectedIndex`	`unknown`	`undefined`	Zero-based active entry.
`modelValue`	`unknown`	`undefined`	Controlled v-model value.
`disabled`	`unknown`	`false`	Disables interaction.
`label`	`unknown`	`Reiter`	Label or accessible name.
`orientation`	`unknown`	`horizontal`	Tab orientation.
`scrollByContent`	`unknown`	`true`	Allows scrolling through tab content.
`swipeEnabled`	`unknown`	`false`	Allows switching tabs by swiping.

Events

Event	Payload / behavior
update:modelValue	New modelValue value; accept using v-model:modelValue (modelValue: v-model).
update:selectedIndex	New selectedIndex value; accept using v-model:selectedIndex (modelValue: v-model).
selectionChanged	New selection: { selectedIndex, itemData }.

Slots

Slot	Arguments
default	{ selectedIndex, item }

vue

<script setup lang="ts">
import { TxTabPanel } from '@tekocloud.de/tecexpress'
import '@tekocloud.de/tecexpress/themes/index.css'

</script>

<template>
  <TxTabPanel :items="[{ text: 'Home' }]">
    <template #default="{ selectedIndex }">Page {{ selectedIndex + 1 }}</template>
  </TxTabPanel>
</template>

TxTabPanel.