@wikicasa-dev/components · Navigation · preferred

BaseTabsContent

The panel of a BaseTabs set, shown while the trigger with the same value is active.

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

Part of the BaseTabs compound component: see the BaseTabs doc for the full composition. Place the panels inside BaseTabs, after (or before) BaseTabsList.

Usage

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

<template>
  <!-- inside <BaseTabs> -->
  <BaseTabsContent value="aste" style="padding-top: 15px">
    Immobili all'asta a Napoli: 54 annunci
  </BaseTabsContent>
</template>

Do / Don't

  • value must match a trigger's value. To show one panel for several tabs, bind :value to a computed that returns the active value when it is one of them, and something unused otherwise.
  • Hidden panels stay mounted unless BaseTabs has unmount-on-hide; forceMount keeps a panel mounted in either case.
  • No default styling: spacing goes in your own class/style.

API

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

Props

Name Type Default Required Description
dataCy string
value StringOrNumber yes A unique value that associates the content with a trigger.
forceMount boolean Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.
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

None.

v-model

None.

Slots

Name Slot props
default

Exposed (template ref)

None.