BaseTab

One tab (header plus panel content) inside the legacy BaseTabView.

import BaseTab from "@wikicasa-dev/components/UIKit/Tab/BaseTab";

Child of the legacy BaseTabView; it renders nothing useful on its own. In the new BaseTabs set, a BaseTab splits into a BaseTabsTrigger (the header) and a BaseTabsContent (the panel); see the BaseTabs doc.

For reading existing code: the tab label is headerTitle or the header slot; the default slot is the panel content; tabPanelClasses styles the panel; class styles the tab button. activeTabPanelIdx makes the tab show another tab's panel (by index) instead of its own.

#Usage

<script setup lang="ts">
import BaseTabView from "@wikicasa-dev/components/UIKit/Tab/BaseTabView";
import BaseTab from "@wikicasa-dev/components/UIKit/Tab/BaseTab";
</script>

<template>
  <BaseTabView tab-view-description="Foto e mappa">
    <BaseTab class="gallery-tab" tab-panel-classes="gallery-panel">
      <template #header>Foto</template>
      Galleria del bilocale in Via Toledo, Napoli
    </BaseTab>
    <BaseTab header-title="Mappa" class="gallery-tab" tab-panel-classes="gallery-panel">
      Mappa della zona Chiaia
    </BaseTab>
  </BaseTabView>
</template>

<style>
.gallery-tab { padding: 0 10px; }
.gallery-panel { margin-top: 10px; }
</style>

#Do / Don't

• Use it only as a direct child of BaseTabView; new code should use BaseTabsTrigger + BaseTabsContent.
• Don't toggle its class based on state: the content re-renders. Target [aria-selected="true"] instead.

#API

Generated from the component's types. Do not edit by hand.

Props

Name	Type	Default	Required	Description
activeTabPanelIdx	number
headerTitle	string
tabPanelClasses	ClassTypeProp

Events

None.

v-model

None.

Slots

Name	Slot props
header

Exposed (template ref)

None.