@wikicasa-dev/components · Navigation · preferred

BaseTabsList

Row that holds the BaseTabsTrigger tabs (and the BaseTabsIndicator) inside BaseTabs.

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

Part of the BaseTabs compound component: see the BaseTabs doc for the full composition. Use exactly one per BaseTabs, as the parent of the triggers.

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";
</script>

<template>
  <BaseTabs default-value="preferiti">
    <BaseTabsList style="display: flex; gap: 36px; overflow-x: auto">
      <BaseTabsIndicator />
      <BaseTabsTrigger value="preferiti">Preferiti</BaseTabsTrigger>
      <BaseTabsTrigger value="ricerche">Ricerche salvate</BaseTabsTrigger>
    </BaseTabsList>
  </BaseTabs>
</template>

Do / Don't

  • It has no layout of its own besides position: relative: make it a flex row with a gap via your own class/style.
  • On mobile, make long lists horizontally scrollable (overflow-x: auto) rather than wrapping.
  • Arrow keys stop at the first and last tab; pass loop to make them wrap around (off by default here, unlike reka-ui).

API

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

Props

Name Type Default Required Description
dataCy string
loop boolean When true, keyboard navigation will loop from last tab to first, and vice versa.
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.