Tabs API Reference

Props

Prop	Type	Default	Description
tabItems	Array	[]	Array of tab items to display
selected	Array/String	null	Currently selected tab(s)
multiple	Boolean	false	Allow selection of multiple tabs
isLabeli18String	Boolean	true	Whether tab labels are i18n translation keys
singlePacked	Boolean	false	Whether to display tabs in a single packed container
tabClasses	Array	[]	Additional CSS classes to apply to the tabs container
bottomLineStyle	Boolean	false	Whether to use the bottom line animation style

Tab Item Object Structure

Each item in the tabItems array should have this structure:

{
  value: 'tab1', // Unique identifier for the tab
  name: 'Tab 1', // Display name or i18n key
  icon: '<svg>...</svg>', // Optional: SVG icon as string
  prepend: '<svg>...</svg>', // Optional: Icon to prepend to the tab
  append: '<svg>...</svg>' // Optional: Icon to append to the tab
}

Events

Event	Payload	Description
item:clicked	Tab Item	Emitted when a tab is clicked

Slots

Slot	Props	Description
tab-icon	{ item }	Custom content for each tab
prepend	{ item }	Content to prepend to each tab
append	{ item }	Content to append to each tab

Methods

The component doesn't expose any methods via template refs.

Example Usage

Basic Usage

<template>
  <OTabs
    :tabItems="tabs"
    :selected="selectedTab"
    @item:clicked="handleTabClick"
  />
  
  <div class="tab-content">
    <component :is="currentTabComponent" />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { OTabs } from 'your-component-library'
import Tab1Content from './Tab1Content.vue'
import Tab2Content from './Tab2Content.vue'
import Tab3Content from './Tab3Content.vue'

const tabs = [
  { value: 'tab1', name: 'Tab 1' },
  { value: 'tab2', name: 'Tab 2' },
  { value: 'tab3', name: 'Tab 3' }
]

const selectedTab = ref('tab1')

const handleTabClick = (tab) => {
  selectedTab.value = tab.value
}

const currentTabComponent = computed(() => {
  switch (selectedTab.value) {
    case 'tab1': return Tab1Content
    case 'tab2': return Tab2Content
    case 'tab3': return Tab3Content
    default: return null
  }
})
</script>

With Bottom Line Style

<template>
  <OTabs
    :tabItems="tabs"
    :selected="selectedTab"
    :bottomLineStyle="true"
    @item:clicked="handleTabClick"
  />
</template>

<script setup>
import { ref } from 'vue'
import { OTabs } from 'your-component-library'

const tabs = [
  { value: 'home', name: 'Home' },
  { value: 'favorites', name: 'Favorites' },
  { value: 'profile', name: 'Profile' }
]

const selectedTab = ref('home')

const handleTabClick = (tab) => {
  selectedTab.value = tab.value
}
</script>

Single Packed Style

<template>
  <OTabs
    :tabItems="tabs"
    :selected="selectedTab"
    :singlePacked="true"
    @item:clicked="handleTabClick"
  />
</template>

<script setup>
import { ref } from 'vue'
import { OTabs } from 'your-component-library'

const tabs = [
  { value: 'option1', name: 'Option 1' },
  { value: 'option2', name: 'Option 2' },
  { value: 'option3', name: 'Option 3' }
]

const selectedTab = ref('option1')

const handleTabClick = (tab) => {
  selectedTab.value = tab.value
}
</script>

With Prepend and Append Icons

<template>
  <OTabs
    :tabItems="tabs"
    :selected="selectedTab"
    @item:clicked="handleTabClick"
  >
    <template #prepend="{ item }">
      <div v-if="item.prepend" v-html="item.prepend"></div>
    </template>
    <template #append="{ item }">
      <div v-if="item.append" v-html="item.append"></div>
    </template>
  </OTabs>
</template>

<script setup>
import { ref } from 'vue'
import { OTabs } from 'your-component-library'

const tabs = [
  { 
    value: 'notifications', 
    name: 'Notifications',
    prepend: '<svg>...</svg>',
    append: '<svg>...</svg>'
  }
]

const selectedTab = ref('notifications')

const handleTabClick = (tab) => {
  selectedTab.value = tab.value
}
</script>