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.
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.indigo-600 thành blue-500 hoặc emerald-600 để phù hợp với màu thương hiệu.width và transform) để phù hợp với số lượng tab.<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>