Vue Component Library

Appearance

Tabs Component Demo ​

This page demonstrates the Tabs component with various configurations and examples.

Basic Tabs ​

A simple tabs component with default settings.

Home
About
Contact
Services

Selected: home

vue
<template>
  <OTabs 
    :tabItems="basicTabs" 
    :selected="selectedBasic"
    :isLabeli18String="false"
    @item:clicked="handleBasicTabClick"
  />
</template>

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

const selectedBasic = ref('home')
const basicTabs = ref([
  { value: 'home', name: 'Home' },
  { value: 'about', name: 'About' },
  { value: 'contact', name: 'Contact' },
  { value: 'services', name: 'Services' }
])

function handleBasicTabClick(item) {
  selectedBasic.value = item.value
}
</script>

Basic Tabs with Bottom Line Style ​

Tabs with an animated bottom line indicator.

Home
About
Contact
Services

Selected: home

vue
<template>
  <OTabs 
    :tabItems="basicTabsWithBottomLine" 
    :selected="selectedBasicWithBottomLine"
    :isLabeli18String="false"
    :bottomLineStyle="true"
    @item:clicked="handleBasicTabWithBottomLineClick"
  />
</template>

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

const selectedBasicWithBottomLine = ref('home')
const basicTabsWithBottomLine = ref([
  { value: 'home', name: 'Home' },
  { value: 'about', name: 'About' },
  { value: 'contact', name: 'Contact' },
  { value: 'services', name: 'Services' }
])

function handleBasicTabWithBottomLineClick(item) {
  selectedBasicWithBottomLine.value = item.value
}
</script>

Icon Tabs ​

Tabs that use icons instead of text labels.

📊
👥
⚙️
🔔
❓

Selected: settings

vue
<template>
  <OTabs 
    :tabItems="iconTabs" 
    :selected="selectedIcon"
    :isLabeli18String="false"
    @item:clicked="handleIconTabClick"
  />
</template>

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

const selectedIcon = ref('settings')
const iconTabs = ref([
  { value: 'dashboard', icon: '📊' },
  { value: 'users', icon: '👥' },
  { value: 'settings', icon: '⚙️' },
  { value: 'notifications', icon: '🔔' },
  { value: 'help', icon: '❓' }
])

function handleIconTabClick(item) {
  selectedIcon.value = item.value
}
</script>

Icon Tabs with Bottom Line Style ​

Icon tabs with an animated bottom line indicator.

📊
👥
⚙️
🔔
❓

Selected: settings

vue
<template>
  <OTabs 
    :tabItems="iconTabs" 
    :bottomLineStyle="true"
    :selected="selectedIcon"
    :isLabeli18String="false"
    @item:clicked="handleIconTabClick"
  />
</template>

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

const selectedIcon = ref('settings')
const iconTabs = ref([
  { value: 'dashboard', icon: '📊' },
  { value: 'users', icon: '👥' },
  { value: 'settings', icon: '⚙️' },
  { value: 'notifications', icon: '🔔' },
  { value: 'help', icon: '❓' }
])

function handleIconTabClick(item) {
  selectedIcon.value = item.value
}
</script>

Mixed Content Single Packed Tabs ​

Tabs that combine icons and text in a single packed container.

📁
🖼️
Docs
Archive
🗑️

Selected: files

vue
<template>
  <OTabs 
    :tabItems="mixedTabs" 
    :selected="selectedMixed"
    :isLabeli18String="false"
    :singlePacked="true"
    @item:clicked="handleMixedTabClick"
  />
</template>

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

const selectedMixed = ref('files')
const mixedTabs = ref([
  { value: 'files', icon: '📁' },
  { value: 'images', icon: '🖼️' },
  { value: 'documents', name: 'Docs' },
  { value: 'archive', name: 'Archive' },
  { value: 'trash', icon: '🗑️' }
])

function handleMixedTabClick(item) {
  selectedMixed.value = item.value
}
</script>

Tabs with Prepend, Append and Tab Classes ​

Tabs with icons before and after the text, using custom styling.

📊
Dashboard
Settings
⚙️
❓
Help
❓

Selected: dashboard

vue
<template>
  <OTabs 
    :tabItems="tabWithIcon" 
    :selected="selectedTabWithIcon"
    :isLabeli18String="false"
    :tabClasses="['dark-gold-tab']"
    @item:clicked="handleTabWithIconClick"
  />
</template>

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

const selectedTabWithIcon = ref('dashboard')
const tabWithIcon = ref([
  { value: 'dashboard', prepend: '📊', name: 'Dashboard' },
  { value: 'settings', append: '⚙️', name: 'Settings' },
  { value: 'help', prepend: '❓', icon: '❓', append: '❓', name: 'Help' }
])

function handleTabWithIconClick(item) {
  selectedTabWithIcon.value = item.value
}
</script>

Tabs with Prepend, Append and Bottom Line Style ​

Tabs with icons and bottom line style.

📊
Dashboard
Settings
⚙️
❓
Help
❓

Selected: dashboard

vue
<template>
  <OTabs 
    :tabItems="tabWithIcon" 
    :bottomLineStyle="true"
    :selected="selectedTabWithIcon"
    :isLabeli18String="false"
    :tabClasses="['dark-gold-tab']"
    @item:clicked="handleTabWithIconClick"
  />
</template>

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

const selectedTabWithIcon = ref('dashboard')
const tabWithIcon = ref([
  { value: 'dashboard', prepend: '📊', name: 'Dashboard' },
  { value: 'settings', append: '⚙️', name: 'Settings' },
  { value: 'help', prepend: '❓', icon: '❓', append: '❓', name: 'Help' }
])

function handleTabWithIconClick(item) {
  selectedTabWithIcon.value = item.value
}
</script>