HybReport Design Language System • Bảng thiết kế modal, panel trượt, và lớp phủ
Kích hoạt thành phần
1. Panel Trượt Phải (Right-Slide Panel)
width: 400px • position: fixed • right: 0 • transition: cubic-bezier(0.25,0.8,0.25,1)
2. Modal Trung Tâm (Center Modal)
max-width: 600px • border-radius: 10px • backdrop-filter: blur(2px)
Bạn có chắc chắn muốn xóa đơn hàng #DH-2024-0891?
Hành động này không thể hoàn tác. Tất cả dữ liệu liên quan bao gồm chi tiết sản phẩm, lịch sử thanh toán và ghi chú sẽ bị xóa vĩnh viễn.
3. Modal Chi Tiết (Drill-Down Modal)
max-width: 92vw • max-height: 80vh • bảng dữ liệu bên trong • context pills
| Mã đơn | Khách hàng | Ngày tạo | Sản phẩm | Số lượng | Đơn giá | Thành tiền | Trạng thái |
|---|---|---|---|---|---|---|---|
| DH-0891 | Công ty ABC | 01/04/2024 | Máy in HP LaserJet | 5 | 8.500.000 | 42.500.000 | Hoàn thành |
| DH-0892 | Cửa hàng XYZ | 02/04/2024 | Laptop Dell Vostro | 3 | 18.200.000 | 54.600.000 | Hoàn thành |
| DH-0893 | Trường ĐH Bách Khoa | 03/04/2024 | Máy chiếu Epson | 10 | 12.000.000 | 120.000.000 | Đang giao |
| DH-0894 | Bệnh viện Chợ Rẫy | 05/04/2024 | Màn hình LG 27" | 20 | 6.800.000 | 136.000.000 | Hoàn thành |
| DH-0895 | Ngân hàng VPBank | 07/04/2024 | Server Dell R740 | 2 | 85.000.000 | 170.000.000 | Hoàn thành |
| DH-0896 | FPT Software | 08/04/2024 | Switch Cisco 48-port | 8 | 22.500.000 | 180.000.000 | Chờ duyệt |
| DH-0897 | Vinamilk | 10/04/2024 | UPS APC 3000VA | 15 | 9.200.000 | 138.000.000 | Hoàn thành |
| DH-0898 | Thế Giới Di Động | 12/04/2024 | Tablet Samsung S9 | 50 | 11.900.000 | 595.000.000 | Đang giao |
4. Lớp Phủ Tải Dữ Liệu (Loading Overlay)
Đang tải dữ liệu...
bg: rgba(255,255,255,0.7) • backdrop-filter: blur(2px) • spinner: 28×28px
Thông số kỹ thuật