Tabs

İçerik organizasyonu için sekme bileşenleri

Temel Sekmeler

Ana Sayfa

Hoş geldiniz! Bu ana sayfa içeriğidir. Burada genel bilgiler ve önemli duyurular yer alır.

Hap Stili Sekmeler

🏠 Ana Sayfa Paneli

Dashboard görünümünüz burada. Tüm önemli metrikleri ve özet bilgileri görebilirsiniz.

Dikey Sekmeler

Genel Bilgiler

Hesabınızın genel bilgilerini buradan yönetin.

İkonlu Sekmeler

1,234
Toplam Kullanıcı
567
Aktif Oturum
89
Yeni Kayıt

Kullanım

<!-- Tab Navigation -->
<div class="border-b border-border">
    <nav class="flex -mb-px">
        <button onclick="switchTab(event, 'tab1')" 
                class="px-6 py-3 border-b-2 border-primary-500 text-primary-500">
            Tab 1
        </button>
        <button onclick="switchTab(event, 'tab2')" 
                class="px-6 py-3 border-b-2 border-transparent">
            Tab 2
        </button>
    </nav>
</div>

<!-- Tab Content -->
<div id="tab1" class="tab-content">
    İçerik 1
</div>
<div id="tab2" class="tab-content hidden">
    İçerik 2
</div>

<script>
function switchTab(event, tabId) {
    // Tüm sekmeleri gizle
    document.querySelectorAll('.tab-content').forEach(content => {
        content.classList.add('hidden');
    });
    
    // Tüm butonlardan active sınıfını kaldır
    event.target.parentElement.querySelectorAll('button').forEach(btn => {
        btn.classList.remove('active', 'border-primary-500', 'text-primary-500');
        btn.classList.add('border-transparent', 'text-gray-500');
    });
    
    // Seçili sekmeyi göster ve butonu aktif yap
    document.getElementById(tabId).classList.remove('hidden');
    event.target.classList.add('active', 'border-primary-500', 'text-primary-500');
    event.target.classList.remove('border-transparent', 'text-gray-500');
}
</script>