Tab Panel

Headless Tabs‑Panel für einfache Tab‑Navigation.

<script setup lang="ts">
import { TabPanel } from '@stratton-cologne/ui'
import { ref } from 'vue'

const active = ref(0)
</script>

<template>
  <div class="tabs">
    <button @click="active = 0" :aria-selected="active===0">Tab 1</button>
    <button @click="active = 1" :aria-selected="active===1">Tab 2</button>
  </div>
  <TabPanel :active-index="active">
    <template #default="{ index }">
      <section v-show="index === 0">Inhalt 1</section>
      <section v-show="index === 1">Inhalt 2</section>
    </template>
  </TabPanel>
</template>

Props

• tabs: Array { key, label, icon?, badge?, disabled? }.
• activeTab: Kontrolliertes aktuelles Tab (v-model: v-model:active-tab).
• width: Nur als data-width ausgegeben; Styling im Consumer (Default: 560px).
• id / instance: Stabile Root-ID und data-instance.

Events

• update:activeTab(key)
• close, refresh, tab-change({ key, previous })
• action({ action, data }) – frei nutzbar in eigenen Slots

Slots

• tab-<key>: Inhalt eines Tabs; Fallback-Slot erhält { tab }.

Styling (data-Attribute)

• Root: [data-component="sc-tab-panel"][data-width="…"]
• Tablist/Buttons: [data-role="tablist"], [data-role="tab"] mit [data-active]/[data-disabled]
• Panels: `[data-role="tabpanel"][data-key="…"][data-active]