F71 — So sánh chế độ mật độ hiển thị

HybReport Design Language System • Comfortable vs Compact Density

● Comfortable

row-height: 40px control-height: 36px font: 13px card-padding: 16px gap: 12px
1. Biểu mẫu nhập liệu
2. Bảng dữ liệu
Mã SP Tên sản phẩm Số lượng Trạng thái
SP-001Thép cuộn cán nóng1.250 tấn Đã giao
SP-002Ống thép mạ kẽm840 tấn Đã giao
SP-003Tôn lạnh phủ màu620 tấn Đang vận chuyển
SP-004Thép hình H-beam380 tấn Chờ xuất kho
SP-005Dây thép gai bọc nhựa95 tấn Hết hàng
3. Thanh bộ lọc
Khu vực: Miền Nam × Quý: Q1-2024 × Trạng thái: Đã giao × Nhóm: Thép cuộn ×
4. Nhóm nút thao tác
5. Chỉ số trong vùng thả
Kéo thả chỉ số vào đây
📊 Doanh thu × 📈 Tăng trưởng × 📦 Sản lượng × 💰 Lợi nhuận ×

● Compact

row-height: 32px control-height: 28px font: 12px card-padding: 12px gap: 8px
1. Biểu mẫu nhập liệu
2. Bảng dữ liệu
Mã SP Tên sản phẩm Số lượng Trạng thái
SP-001Thép cuộn cán nóng1.250 tấn Đã giao
SP-002Ống thép mạ kẽm840 tấn Đã giao
SP-003Tôn lạnh phủ màu620 tấn Đang vận chuyển
SP-004Thép hình H-beam380 tấn Chờ xuất kho
SP-005Dây thép gai bọc nhựa95 tấn Hết hàng
3. Thanh bộ lọc
Khu vực: Miền Nam × Quý: Q1-2024 × Trạng thái: Đã giao × Nhóm: Thép cuộn ×
4. Nhóm nút thao tác
5. Chỉ số trong vùng thả
Kéo thả chỉ số vào đây
📊 Doanh thu × 📈 Tăng trưởng × 📦 Sản lượng × 💰 Lợi nhuận ×