CataUiTabSwitch

A tab switch component that displays a series of buttons in a toggle-like format, allowing users to select between different options or views. This component is designed for compact tab selection and provides a visual indication of the active tab.

Basic Usage

<CataUiTabSwitch :tabs="tabs" v-model="tabActive" />

Props

Prop	Description	Type	Default	Required	Options
tabs	An array of tab objects with 'id' and 'label' properties	Array		true
v-model	The currently active tab object	Object		true

Events

Event	Description	Parameters
update:modelValue	Emitted when the active tab changes	(tab: Object) - The newly selected tab object

Data Structure

Each tab object in the 'tabs' array should have at least:

id: A unique identifier for the tab
label: The text displayed on the tab button

const tabs = [
    { id: 1, label: 'Tab 1' },
    { id: 2, label: 'Tab 2' },
    { id: 3, label: 'Tab 3' },
];

const tabActive = ref(tabs[0]);

Example with Multiple Tabs

<CataUiTabSwitch :tabs="tabs" v-model="tabActive" />

<script setup>
  import { ref } from 'vue';
  
  const tabs = [
    { id: 1, label: 'Overview' },
    { id: 2, label: 'Details' },
    { id: 3, label: 'Settings' },
    { id: 4, label: 'History' }
  ];
  
  const tabActive = ref(tabs[0]);
</script>

CataUiTabs: For traditional tabbed interfaces with content panels
CataUiSwitch: For binary toggle options