<>📌 Tabs là một UI component giúp phân chia nội dung thành nhiều phần khác nhau trên cùng một màn hình. Người dùng có thể chuyển đổi giữa các nội dung bằng cách nhấn vào từng tab.
📌 Tabs giúp cải thiện UX bằng cách:
✔ Tiết kiệm không gian – Không cần hiển thị tất cả nội dung cùng lúc.
✔ Giúp điều hướng nhanh hơn – Chỉ cần click vào tab để xem nội dung.
✔ Tổ chức nội dung tốt hơn – Nhóm nội dung liên quan lại với nhau.
/Các loại Tabs phổ biến
1️⃣ Default Tabs (Tabs cơ bản)
📌 Hiển thị theo chiều ngang với nội dung thay đổi khi click vào.
✔ Ví dụ: Trang cài đặt tài khoản (Account Settings)
2️⃣ Vertical Tabs (Tabs dọc)
📌 Tabs xếp dọc bên trái hoặc bên phải, thường dùng trong Dashboard.
✔ Ví dụ: Gmail Sidebar, Admin Panel
3️⃣ Underline Tabs (Tabs có gạch chân)
📌 Chỉ có chữ, tab được chọn có gạch chân bên dưới.
✔ Ví dụ: YouTube Studio, Instagram Profile
4️⃣ Icon Tabs (Tabs có icon)
📌 Kết hợp biểu tượng và chữ để dễ nhận diện.
✔ Ví dụ: Facebook Menu (Bảng tin, Video, Marketplace, Thông báo, v.v.)
5️⃣ Scrollable Tabs (Tabs có thể cuộn)
📌 Khi số lượng tab quá nhiều, có thể cuộn ngang.
✔ Ví dụ: Google Play Store Categories
/Cấu trúc cơ bản của Tabs
📌 Một Tabs component thường có 2 phần chính:
1️⃣ Tab Headers – Danh sách các tab (danh mục nội dung).
2️⃣ Tab Content – Nội dung tương ứng với từng tab.
/UX Best Practices cho Tabs 🎨
✅ Giữ số lượng Tabs hợp lý
✔ Không nên có quá 5-7 tab trên cùng một hàng.
✅ Tabs nên dễ nhận biết và click vào dễ dàng
✔ Kích thước tabs phải đủ lớn để dễ nhấn trên mobile.
✅ Sử dụng hiệu ứng chuyển đổi mượt mà
✔ Người dùng cảm thấy dễ chịu khi chuyển giữa các tab.
✅ Tabs nên có trạng thái hiển thị rõ ràng
✔ Tab đang chọn cần có dấu hiệu (màu, gạch chân, hiệu ứng).
✅ Chắc chắn rằng Tabs có nội dung phù hợp
✔ Tránh đặt nội dung quá khác nhau vào cùng một nhóm tab.
