Animasyonlu Altı Çizili Sekmeler

Kullanıcıyı sekmeler arasında geçiş yaparken takip eden düzgün kayan alt çizgileri olan gelişmiş bir sekme kullanıcı arayüzü.

Önizleme

Account settings content goes here. Manage your profile details.

Kullanım Durumları ve Özellikler

Kategori değiştirme: Makale kategorileri, ayarlar ekranlarındaki sekmeler vb. gibi aynı ekrandaki farklı bölümler arasında geçiş yapan kullanıcı arayüzleri için idealdir.
Yer tasarrufu: Sınırlı ekran alanında birden fazla içerik sağlar ve mobil ortamlarda bile etkilidir.
Görsel geçerli konum: Alt çizgi animasyonu, sekmenin geçerli konumunu sorunsuz bir şekilde takip ederek kullanıcının o anda nereye baktığını sezgisel olarak anlamanıza olanak tanır.

Tasarım ve UX’in önemli noktaları (Tasarım ve UX)

Aşağıdaki animasyon: CSS “geçiş” veya “dönüştürme” kullanarak alt çizginin kaydığı bir hareket uygularız. Bu, sekme değiştirdiğinize dair güzel bir geri bildirim sağlar.
Erişilebilirlik açısından önemli noktalar: Yazı tipi rengi (kontrast), görsel farklılaştırmayı kolaylaştırmak için etkin ve etkin olmayan sekmeler arasında net bir şekilde ayrılmıştır.

Nasıl kişiselleştirilir (Özelleştirme Kılavuzu)

Renk değişimi: Marka rengine uyacak şekilde “indigo-600” gibi sınıfları “mavi-500” veya “zümrüt-600” olarak değiştirerek tasarımı birleştirebilirsiniz.
Sekme ekleme: HTML’ye düğmeler ve içerik panelleri ekleyin ve JavaScript mantığını (“genişlik” ve “dönüştürme” oranları) sekme sayısıyla eşleşecek şekilde ayarlayın.

Uygulama kodu (Uygulama)

<div class="max-w-md mx-auto">
<div class="relative flex border-b border-gray-200 dark:border-zinc-800">
  <button class="tab-btn flex-1 py-3 text-sm font-medium text-indigo-600 dark:text-indigo-400" data-target="tab1">Account</button>
  <button class="tab-btn flex-1 py-3 text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200" data-target="tab2">Security</button>
  <button class="tab-btn flex-1 py-3 text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200" data-target="tab3">Notifications</button>
  
  <div id="tab-indicator" class="absolute bottom-0 left-0 h-0.5 bg-indigo-600 dark:bg-indigo-400 transition-all duration-300 ease-out" style="width: 33.33%; transform: translateX(0%);"></div>
</div>
<div class="pt-4">
  <div id="tab1" class="tab-content text-gray-600 dark:text-gray-300 text-sm">Account settings content goes here. Manage your profile details.</div>
  <div id="tab2" class="tab-content hidden text-gray-600 dark:text-gray-300 text-sm">Security settings content goes here. Change your password.</div>
  <div id="tab3" class="tab-content hidden text-gray-600 dark:text-gray-300 text-sm">Notification preferences go here. Manage email alerts.</div>
</div>
</div>
<script>
const btns = document.querySelectorAll('.tab-btn');
const contents = document.querySelectorAll('.tab-content');
const indicator = document.getElementById('tab-indicator');

btns.forEach((btn, i) => {
  btn.addEventListener('click', () => {
    btns.forEach(b => {
      b.classList.remove('text-indigo-600', 'dark:text-indigo-400');
      b.classList.add('text-gray-500', 'dark:text-gray-400');
    });
    btn.classList.remove('text-gray-500', 'dark:text-gray-400');
    btn.classList.add('text-indigo-600', 'dark:text-indigo-400');
    
    indicator.style.transform = `translateX(${i * 100}%)`;
    
    contents.forEach(c => c.classList.add('hidden'));
    document.getElementById(btn.dataset.target).classList.remove('hidden');
  });
});
</script>