Табы с анимированным подчеркиванием

Сложный пользовательский интерфейс вкладок с плавными скользящими подчеркиваниями, которые следуют за пользователем при переключении между вкладками.

Предварительный просмотр

Account settings content goes here. Manage your profile details.

Варианты использования и возможности

Переключение категорий: идеально подходит для пользовательских интерфейсов, которые переключаются между различными разделами на одном экране, например категориями статей, вкладками на экранах настроек и т. д.
Экономия места: позволяет разместить несколько материалов на ограниченном пространстве экрана и эффективно даже в мобильных средах.
Визуализация текущей позиции: анимация подчеркивания плавно следует за текущим положением вкладки, что позволяет интуитивно понять, куда в данный момент смотрит пользователь.

##Ключевые моменты дизайна и UX (Design&UX)

Анимация: используя CSS transition или transform, мы реализуем движение, при котором подчеркивание перемещается.Это обеспечивает приятную обратную связь о том, что вы переключили вкладки.
Удобства: цвет шрифта (контраст) четко разделен между активными и неактивными вкладками, чтобы облегчить визуальное различие.

Как настроить (Руководство по настройке)

Изменение цвета. Вы можете унифицировать дизайн, просто изменив классы, например «индиго-600», на «синий-500» или «изумрудный-600», чтобы они соответствовали цвету бренда.
Добавление вкладок: добавьте кнопки и панели контента в HTML и настройте логику JavaScript (соотношения ширины и преобразования) в соответствии с количеством вкладок.

Код реализации (Реализация)

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