CataUiTabs

The CataUiTabs component provides a responsive, navigable tab interface with support for icons, tooltips, and action buttons. It supports horizontal scrolling with arrow navigation for overflowing tabs and includes multiple styling options.

<CataUiTabs :tabs="tabs" v-model="tabActive" @tabChanged="onTabChanged" />
<CataUiTabs :tabs="tabs" v-model="tabActiveSecondary" type="secondary" size="small" />

Props

Prop	Description	Type	Default	Required	Options
size	The size of the tabs	String	'medium'	false	'small', 'medium', 'large'
tabs	An array of tab objects (see data structure below)	Array		true
type	Changes the visual style of the tabs	String	'primary'	false	'primary', 'secondary'
v-model	The tab object for the active tab	Object		true

Events

Event	Description	Parameters
actionClicked	Emitted when an action button in a tab is clicked	`{ id: number, action: object }` - Contains the tab id and action object
tabChanged	Emitted when the active tab is changed	None

Tab Object Structure

The tabs prop expects an array of objects with the following structure:

const tabs = [
    { 
        id: 1,              // Required: Unique identifier for the tab
        label: 'Tab 1',     // Required: Text label for the tab
        icon: 'bi-person-fill', // Optional: Icon to display before the label
        disabled: false,    // Optional: Whether the tab is disabled
        tooltip: 'Tooltip text', // Optional: Tooltip text to display on hover
        action: {           // Optional: Action button to display in the tab
            id: 1,          // Identifier for the action
            icon: 'bi-trash3' // Icon for the action button
        }
    },
    { id: 2, label: 'Tab 2' },
    // Additional tabs...
];

const tabActive = ref(tabs[0]);
const tabActiveSecondary = ref(tabs[0]);

Complete Example

<template>
  <CataUiTabs 
    :tabs="tabs" 
    v-model="activeTab"
    type="primary" 
    size="medium" 
    @tabChanged="handleTabChange"
    @actionClicked="handleActionClick" />
</template>

<script setup>
  import { ref } from 'vue';

  const tabs = [
    { id: 1, label: 'Profile', icon: 'bi-person-fill' },
    { id: 2, label: 'Settings', icon: 'bi-gear' },
    { id: 3, label: 'Documents', icon: 'bi-file-earmark', action: { id: 1, icon: 'bi-plus' } },
    { id: 4, label: 'Help', icon: 'bi-question-circle', tooltip: 'Get help' },
    { id: 5, label: 'Disabled Tab', disabled: true }
  ];

  const activeTab = ref(tabs[0]);

  function handleTabChange() {
    console.log('Active tab changed to:', activeTab.value);
  }

  function handleActionClick(data) {
    console.log('Action clicked:', data);
  }
</script>

Features

Scrollable Tabs: Automatically includes left/right navigation buttons when tabs overflow the container
Draggable Navigation: Click and drag to scroll through tabs
Responsive Design: Adapts to container width
Tab Actions: Optional action buttons within tabs
Icons: Optional icons for each tab
Tooltips: Optional tooltips for additional information
Disabled Tabs: Support for disabling specific tabs
Multiple Styles: Primary and secondary design variants
Size Options: Small, medium, and large sizes