TxTabPanel · Vue · tecexpress

Reiter und zugehöriger aktiver Inhalt in einer gemeinsamen Ansicht.

Prop	Typ	Standard	Bedeutung
`dataSource`	`unknown`	`undefined`	Liste, Konfiguration oder DataSource-Instanz; hat Vorrang vor items.
`items`	`unknown`	`[]`	Einträge; bei Datenbindung durch dataSource ersetzt.
`selectedIndex`	`unknown`	`undefined`	Nullbasierter aktiver Eintrag.
`modelValue`	`unknown`	`undefined`	Kontrollierter Wert für v-model.
`disabled`	`unknown`	`false`	Sperrt die Interaktion.
`label`	`unknown`	`Reiter`	Beschriftung beziehungsweise zugänglicher Name.
`orientation`	`unknown`	`horizontal`	Ausrichtung der Reiter.
`scrollByContent`	`unknown`	`true`	Erlaubt Scrollen über den Reiterinhalt.
`swipeEnabled`	`unknown`	`false`	Erlaubt Reiterwechsel durch Wischen.

Ereignisse

Event	Payload / Verhalten
update:modelValue	Neuer Wert von modelValue; über v-model:modelValue übernehmen (modelValue: v-model).
update:selectedIndex	Neuer Wert von selectedIndex; über v-model:selectedIndex übernehmen (modelValue: v-model).
selectionChanged	Neue Auswahl: { selectedIndex, itemData }.

Slots

Slot	Argumente
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.