F71 — Filter Bar & Filter Chips

Filter Bar — Ví dụ đầy đủ

Thanh lọc dữ liệu với các chip bộ lọc đang hoạt động, nhóm logic, và nút thêm bộ lọc.

4

Doanh thu ≥ 500,000,000₫ AND Chi nhánh = Hà Nội OR Ngày tạo : 01/04/2026 → 30/04/2026 AND Trạng thái = Đã duyệt

Thêm bộ lọc

Trạng thái Filter Chip

Tất cả các trạng thái hiển thị của chip bộ lọc: mặc định, hover, active, error, disabled.

Default / Inactive

Khu vực = Tất cả

Hover (simulated)

Khu vực = Miền Bắc

Active

Doanh thu ≥ 1 tỷ

Error

Ngày tạo : Không hợp lệ

Disabled

Mã KH = —

Date Range

Kỳ báo cáo : Q1/2026

Nhóm bộ lọc — Logic AND / OR

Hiển thị cách các bộ lọc được nhóm với toán tử logic.

Nhóm 1 — AND logic

Chi nhánh = TP.HCM AND Phòng ban = Kinh doanh AND Doanh thu > 200,000,000₫

Nhóm 2 — OR logic

Trạng thái = Chờ duyệt OR Trạng thái = Đang xử lý OR Trạng thái = Tạm hoãn

Nhóm hỗn hợp — AND + OR

Ngày tạo : 01/01/2026 → 31/03/2026 AND Loại = Bán hàng OR Loại = Dịch vụ

Filter Count Badge

Hiển thị số lượng bộ lọc đang hoạt động.

1 4 12 99+

Nút Thêm Bộ Lọc

Nút dạng dashed border để thêm bộ lọc mới.

Thêm bộ lọc Thêm bộ lọc (hover)

Date Range Filter Chip — Biến thể

Các dạng hiển thị bộ lọc ngày tháng.

Ngày tạo : 01/05/2026 → 17/05/2026 Kỳ báo cáo : Tháng 4/2026 Năm tài chính : 2025–2026 Cập nhật : 7 ngày qua

Thông số kỹ thuật

Design tokens và CSS specifications cho filter bar & chips.