BaseTabView

First-generation tabs container driven by BaseTab children and an index-based v-model.

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

Older tabs implementation, still used in existing pages. For new work use BaseTabs with BaseTabsList, BaseTabsTrigger, BaseTabsContent and BaseTabsIndicator: it covers the same cases (bottom tab bar, several tabs sharing one panel) with value-based selection, keyboard navigation and an animated indicator.

How it works, for reading existing code: BaseTabView builds the tab bar from its direct BaseTab children; the active tab is a 0-based index in v-model:active-idx. tabViewDescription is required (screen-reader label of the tab list) and tabsPosition puts the bar on top (default) or bottom.

#Usage

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

const activeIdx = ref(0);
</script>

<template>
  <BaseTabView
    v-model:active-idx="activeIdx"
    tab-view-description="Dati di mercato"
    tab-list-classes="market-tab-list"
  >
    <BaseTab header-title="Prezzi">Prezzo medio a Firenze: 4.150 €/m²</BaseTab>
    <BaseTab header-title="Affitti">Affitto medio a Firenze: 18,90 €/m²</BaseTab>
  </BaseTabView>
</template>

<style>
.market-tab-list { display: flex; gap: 15px; margin-bottom: 10px; }
</style>

#Do / Don't

• Don't start new tab UIs with it; migrate to BaseTabs when touching one.
• Only direct BaseTab children (or a direct v-for of them) become tabs; wrappers in between are ignored.
• Changing a BaseTab's classes re-renders its content. Style the active tab with [aria-selected="true"] instead of toggling classes.
• tabClicked fires with { tabIdx, tabElement } on every tab click.

#API

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

Props

Name	Type	Default	Required	Description
tabsPosition	"top" | "bottom"	"top"
tabViewDescription	string		yes
tabListClasses	ClassTypeProp
dataCy	string
activeIdx	number	0		Model value which keeps track of the active tab. By default, we will activate the first tab

Events

Name	Payload
update:activeIdx	[value: number | undefined]
tabClicked	[{ tabIdx: number; tabElement: TabType; }]

v-model

• v-model:activeIdx (number)

Slots

None.

Exposed (template ref)

None.