Filter tab với single selection và hiệu ứng sliding background — mỗi lần đổi tab, background trượt mượt sang vị trí mới tạo cảm giác liên tục thay vì bật/tắt đột ngột.
Khi nào dùng
- Danh sách có 2–6 nhóm rõ ràng, người dùng thường chỉ quan tâm một nhóm tại một thời điểm
- Cần visual feedback mạnh khi chuyển filter để người dùng nhận ra trạng thái đã thay đổi
- Thay thế cho dropdown filter khi số lượng option ít và cần luôn hiển thị
Hành vi
| Trạng thái | Mô tả |
|---|---|
| Default | Tab “Tất cả” được chọn, hiện toàn bộ danh sách |
| Chọn tab | Background trượt sang tab đó, lọc chỉ còn nhóm tương ứng |
| Chọn lại “Tất cả” | Background trượt về đầu, hiện lại toàn bộ |
Chọn tab để lọc danh sách
Lưu ý thiết kế
Sliding transition — Dùng cubic-bezier(0.4, 0, 0.2, 1) cho cảm giác tự nhiên. Tránh linear vì trông cứng, tránh bounce vì quá playful cho context tài chính.
Không dùng cho multi-select — Pattern này là single selection. Nếu cần chọn nhiều filter cùng lúc, dùng checkbox hoặc toggle chip thay thế.
Tab “Tất cả” luôn đặt đầu tiên — Đây là trạng thái mặc định và điểm thoát tự nhiên khi người dùng muốn bỏ filter.