Tabs

Import

Tabs are composed of two parts — a TabGroup that renders the tab bar and one Tab per view:

import { Tab } from "@dr-max/ui/tab"
import { TabGroup } from "@dr-max/ui/tab-group"

The tab-group entry carries its own precompiled CSS (including the styles of the Tab, TabBadge and Text parts it composes) — no extra style imports needed.

Usage

Each Tab registers itself with the surrounding TabGroup; its name is the label shown in the tab bar and the value the group's model uses. The first visible tab is selected by default:

<script setup lang="ts">
import { Tab } from "@dr-max/ui/tab"
import { TabGroup } from "@dr-max/ui/tab-group"
</script>

<template>
  <TabGroup>
    <Tab name="Description">
      Paracetamol relieves mild to moderate pain and lowers fever.
    </Tab>
    <Tab name="Dosage">
      Adults and children over 12: 1–2 tablets every 4–6 hours as needed.
    </Tab>
    <Tab name="Ingredients">
      Each tablet contains 500 mg of paracetamol.
    </Tab>
  </TabGroup>
</template>

Counter

Set counter on a tab to show a Tab badge next to its label:

<template>
  <TabGroup>
    <Tab name="Description"> … </Tab>
    <Tab name="Reviews" :counter="12"> … </Tab>
  </TabGroup>
</template>

Preselected tab

Without a model value the group opens on the first visible tab — set selected on a tab to open on a different one:

<template>
  <TabGroup>
    <Tab name="Description"> … </Tab>
    <Tab name="Dosage" selected> … </Tab>
  </TabGroup>
</template>

Controlled state

Bind the selected tab's name with v-model to control the group programmatically:

<script setup lang="ts">
import { Tab } from "@dr-max/ui/tab"
import { TabGroup } from "@dr-max/ui/tab-group"
import { ref } from "vue"

const activeTab = ref("Dosage")
</script>

<template>
  <TabGroup v-model="activeTab">
    <Tab name="Description"> … </Tab>
    <Tab name="Dosage"> … </Tab>
  </TabGroup>
</template>

Hidden tabs

Set visible to false to remove a tab from the tab bar without unmounting it — useful for tabs that depend on loaded data:

<template>
  <TabGroup>
    <Tab name="Description"> … </Tab>
    <Tab name="Reviews" :visible="reviews.length > 0"> … </Tab>
  </TabGroup>
</template>