Tabs - Pharen

Use Tabs to switch between related content panels. This page covers every Vue component exported by the public module.

Install the package and import its styles once. See Installation for the complete setup.

Import

import { Tabs, TabsContent, TabsList, TabsTrigger } from '@pharen/ui';

Example

<script setup lang="ts">
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@pharen/ui';
</script>

<template>
  <Tabs default-value="overview">
    <TabsList>
      <TabsTrigger value="overview">Overview</TabsTrigger>
      <TabsTrigger value="activity">Activity</TabsTrigger>
    </TabsList>
    <TabsContent value="overview">Workspace overview</TabsContent>
    <TabsContent value="activity">Recent activity</TabsContent>
  </Tabs>
</template>

Exports

Export	Purpose
`Tabs`	Exported Vue component from this module.
`TabsContent`	Contains the visible content.
`TabsList`	Exported Vue component from this module.
`TabsTrigger`	Opens or activates the component.

Source

Open the source on GitHub