Onglets avec underline animé

Une interface utilisateur d’onglets sophistiquée avec des soulignements coulissants fluides qui suivent l’utilisateur lorsqu’il bascule entre les onglets.

Aperçu

Account settings content goes here. Manage your profile details.

Cas d’utilisation et fonctionnalités

Changement de catégorie : Idéal pour les interfaces utilisateur qui basculent entre différentes sections au sein du même écran, telles que les catégories d’articles, les onglets sur les écrans de paramètres, etc.
Gain de place : fournit plusieurs contenus dans un espace d’écran limité et est efficace même dans les environnements mobiles.
Position actuelle visuelle : L’animation de soulignement suit en douceur la position actuelle de l’onglet, vous permettant de comprendre intuitivement où l’utilisateur regarde actuellement.

Points clés du design et de l’UX (Design & UX)

Animation suivante : En utilisant CSS transition ou transform, nous implémentons un mouvement où le soulignement glisse.Cela fournit un bon retour indiquant que vous avez changé d’onglet.
Considérations d’accessibilité : La couleur de la police (contraste) est clairement séparée entre les onglets actifs et inactifs pour faciliter la différenciation visuelle.

Comment personnaliser (Guide de personnalisation)

Changement de couleur : Vous pouvez unifier le design en changeant simplement les classes telles que « indigo-600 » en « bleu-500 » ou « émeraude-600 » pour correspondre à la couleur de la marque.
Ajout d’onglets : ajoutez des boutons et des panneaux de contenu au HTML et ajustez la logique JavaScript (rapports « largeur » et « transformation ») pour correspondre au nombre d’onglets.

Code d’implémentation (Implémentation)

<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>