Tab Underline Động

Giao diện người dùng tab phức tạp với các gạch chân trượt mượt mà theo dõi người dùng khi họ chuyển đổi giữa các tab.

Xem trước

Account settings content goes here. Manage your profile details.

Trường hợp sử dụng & Tính năng

Chuyển đổi danh mục: Lý tưởng cho các giao diện người dùng chuyển đổi giữa các phần khác nhau trong cùng một màn hình, chẳng hạn như danh mục bài viết, tab trên màn hình cài đặt, v.v.
Tiết kiệm không gian: Cung cấp nhiều nội dung trong không gian màn hình hạn chế và hiệu quả ngay cả trong môi trường di động.
Vị trí hiện tại trực quan: Hoạt ảnh gạch chân bám sát vị trí hiện tại của tab một cách mượt mà, cho phép bạn hiểu trực quan nơi người dùng hiện đang nhìn.

Những điểm chính của thiết kế và UX (Design & UX)

Hoạt hình sau: Sử dụng CSS transition hoặc transform, chúng tôi thực hiện một chuyển động trong đó các slide gạch chân.Điều này cung cấp phản hồi thú vị rằng bạn đã chuyển tab.
Cân nhắc về khả năng truy cập: Màu phông chữ (độ tương phản) được phân tách rõ ràng giữa các tab hoạt động và không hoạt động để tạo điều kiện phân biệt trực quan.

Cách tùy chỉnh (Hướng dẫn tùy chỉnh)

Thay đổi màu sắc: Bạn có thể thống nhất thiết kế bằng cách thay đổi các lớp như indigo-600 thành blue-500 hoặc emerald-600 để phù hợp với màu thương hiệu.
Thêm tab: Thêm các nút và bảng nội dung vào HTML và điều chỉnh logic JavaScript (tỷ lệ width và transform) để phù hợp với số lượng tab.

Mã triển khai (Implementation)

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