BaseTabsIndicator

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

Part of the BaseTabs compound component: see the BaseTabs doc for the full composition. Optional: without it, the active trigger shows a static underline. Place it once, inside BaseTabsList.

#Usage

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

<template>
  <!-- inside <BaseTabs><BaseTabsList> -->
  <BaseTabsIndicator />
</template>

#Do / Don't

• It is a 2px bar positioned at the bottom of BaseTabsList; don't wrap it in other elements.
• To replace the bar's look, pass your own element in the default slot (it fills the indicator box).
• If the tabs' widths change after mount (fonts loading, labels changing), call the exposed updateIndicatorStyle() through a template ref to re-measure.

#Styling hooks

Color, radius and offset come from the CSS custom properties set on BaseTabs: --indicator-bg-color, --indicator-border-radius-top, --indicator-border-radius-bottom, --indicator-bottom.

#API

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

Props

Name	Type	Default	Required	Description
dataCy	string
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)

Name	Type
updateIndicatorStyle	() => void | undefined