BaseTabs

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

Use it to switch between sibling views of the same context without leaving the page: "Vendita / Affitto / Aste" in a search box, "Preferiti / Ricerche salvate / Visti di recente" in a user area. Don't use it for page navigation (use links) or for a filter that changes a single list (use BaseButton selection variants).

It is a compound component; always use the five parts together:

• BaseTabs: the root. Holds the active value (v-model, string or number).
• BaseTabsList: the row of tabs.
• BaseTabsIndicator: optional animated underline, placed inside BaseTabsList.
• BaseTabsTrigger: one tab button, with a value.
• BaseTabsContent: the panel shown when the trigger with the same value is active.

Keyboard support (arrow keys, Home/End) and ARIA roles come built in.

#Usage

<script setup lang="ts">
import BaseTabs from "@wikicasa-dev/components/UIKit/Tab/v2/BaseTabs";
import BaseTabsList from "@wikicasa-dev/components/UIKit/Tab/v2/BaseTabsList";
import BaseTabsIndicator from "@wikicasa-dev/components/UIKit/Tab/v2/BaseTabsIndicator";
import BaseTabsTrigger from "@wikicasa-dev/components/UIKit/Tab/v2/BaseTabsTrigger";
import BaseTabsContent from "@wikicasa-dev/components/UIKit/Tab/v2/BaseTabsContent";
import { ref } from "vue";

const tabs = [
  { value: "vendita", label: "Vendita" },
  { value: "affitto", label: "Affitto" },
  { value: "aste", label: "Aste" },
];
const active = ref("vendita");
</script>

<template>
  <BaseTabs v-model="active">
    <BaseTabsList style="display: flex; justify-content: center; gap: 20px; margin-bottom: 15px">
      <BaseTabsIndicator />
      <BaseTabsTrigger v-for="tab in tabs" :key="tab.value" :value="tab.value">
        {{ tab.label }}
      </BaseTabsTrigger>
    </BaseTabsList>

    <BaseTabsContent value="vendita">Case in vendita a Bologna: 2.418 annunci</BaseTabsContent>
    <BaseTabsContent value="affitto">Case in affitto a Bologna: 731 annunci</BaseTabsContent>
    <BaseTabsContent value="aste">Immobili all'asta a Bologna: 96 annunci</BaseTabsContent>
  </BaseTabs>
</template>

#Do / Don't

• Give every trigger a unique value and a matching BaseTabsContent. Several triggers can share one panel: bind the panel's value to a computed that returns the active value when it is one of them.
• Put BaseTabsIndicator inside BaseTabsList. Without it, the active trigger still gets a static 2px underline (no animation).
• Inactive panels stay mounted (hidden), so their state survives tab switches. Pass unmount-on-hide to unmount them instead.
• Use default-value instead of v-model when you don't need to read the active tab. The default slot also exposes modelValue.
• To put the tabs under the panels, place BaseTabsList after the BaseTabsContents.
• Style the selected tab with a [data-state="active"] selector on the trigger (inactive ones have data-state="inactive").

#Styling hooks

Set on BaseTabs (with a selector more specific than .uikit-base-tabs, or inline style): --indicator-bg-color (indicator color, default primary blue; the fallback underline without BaseTabsIndicator is always primary blue), --indicator-border-radius-top, --indicator-border-radius-bottom, --indicator-bottom (lift the underline from the bottom edge).

#API

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

Props

Name	Type	Default	Required	Description
dataCy	string
defaultValue	T			The value of the tab that should be active when initially rendered. Use when you do not need to control the state of the tabs
orientation	DataOrientation			The orientation the tabs are laid out. Mainly so arrow navigation is done accordingly (left & right vs. up & down)
dir	Direction			The reading direction of the combobox when applicable. If omitted, inherits globally from ConfigProvider or assumes LTR (left-to-right) reading mode.
activationMode	"automatic" | "manual"			Whether a tab is activated automatically (on focus) or manually (on click).
modelValue	T			The controlled value of the tab to activate. Can be bind as v-model.
unmountOnHide	boolean			When true, the element will be unmounted on closed state.
asChild	boolean			Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as	AsTag | Component			The element or component this component should render as. Can be overwritten by asChild.

Events

Name	Payload
update:modelValue	[payload: T]
mounted

v-model

• v-model binds modelValue (T)

Slots

Name	Slot props
default	{ modelValue: T; }

Exposed (template ref)

None.