Tabs
Contents
Tabs organize content into separate sections, allowing users to switch between views seamlessly. They improve navigation in dashboards, settings, and categorized data. Variations include text-only, icon-enhanced, and counter-based tabs for better usability.
Introduction
The Tabs Component allows users to switch between different sections of content efficiently without reloading the page. It enhances navigation and user experience, especially when dealing with multiple related views.
Code structure
The tabs-container class is used as the wrapper for all tabs, and each tab is defined inside the .tab-item class.
HTML
<div class="js-simplebar">
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="layout-01.html">إعدادات عامة</a>
</li>
<li class="nav-item">
<a class="nav-link" href="layout-02.html">الواجهة الرئيسية</a>
</li>
<li class="nav-item">
<a class="nav-link" href="layout-03.html">قائمة المنصة</a>
</li>
<li class="nav-item">
<a class="nav-link" href="layout-04.html">الخدمات</a>
</li>
</ul>
</div>
Basic Tabs
The tabs-container class is used as the wrapper for all tabs, and each tab is defined inside the .tab-item class.
HTML
<div class="js-simplebar">
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="layout-01.html">إعدادات عامة</a>
</li>
<li class="nav-item">
<a class="nav-link" href="layout-02.html">الواجهة الرئيسية</a>
</li>
<li class="nav-item">
<a class="nav-link" href="layout-03.html">قائمة المنصة</a>
</li>
<li class="nav-item">
<a class="nav-link" href="layout-04.html">الخدمات</a>
</li>
</ul>
</div>
<!-- Usage Example -->
<template>
<DefaultTab
v-model="activeTab"
:tabs="[
{ label: 'إعدادات عامة', value: 'general' },
{ label: 'الواجهة الرئيسية', value: 'home' },
{ label: 'قائمة المنصة', value: 'menu' },
{ label: 'الخدمات', value: 'services' },
]"
/>
<div class="tab-content mt-3">
<div v-if="activeTab === 'general'">👑 إعدادات عامة</div>
<div v-else-if="activeTab === 'home'">🏠 الواجهة الرئيسية</div>
<div v-else-if="activeTab === 'menu'">📋 قائمة المنصة</div>
<div v-else-if="activeTab === 'services'">🛠 الخدمات</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
const activeTab = ref('general')
</script>
<!-- Vue Component Code Block -->
<template>
<div class="js-simplebar">
<ul class="nav">
<li v-for="(tab, index) in tabs" :key="index" class="nav-item">
<a
href="#"
class="nav-link"
:class="{ active: modelValue === tab.value }"
@click.prevent="$emit('update:modelValue', tab.value)"
>
{{ tab.label }}
</a>
</li>
</ul>
</div>
</template>
<script setup>
defineProps({
modelValue: String,
tabs: {
type: Array,
default: () => [],
},
})
defineEmits(['update:modelValue'])
</script>