BNN · lớp skin thứ hai của jpace
Bộ thành phần BNN — 24 component
Showcase dựng bằng HTML/CSS thuần trên bnn-tokens.css +
bnn-components.css + bnn-ui.js: không framework, không request bên thứ ba,
số liệu là dữ liệu mẫu tiếng Việt (mã đơn, tài xế, host *.bnn.vn).
Hành vi bấm được nằm ở bnn-ui.js: tab, segmented, OTP, công tắc, toast, hộp thoại, sheet, ngăn kéo.
docs/AHATHEME-PLAN.md §6
(ánh xạ từ bản gương sang bề mặt jpace), tên class lấy từ wwwroot/assets/css/bnn-components.css,
nhãn và dữ liệu đối chiếu trang demo của bản gương (chỉ đọc DOM/text, không dùng ảnh).
1. Nút
.bnn-btn · --primary/--navy/--ghost/--danger · --sm/--lg · --loading/--block
Bốn biến thể màu, ba kích thước, trạng thái vô hiệu và đang xử lý (spinner `::after`). Dùng ở: mọi toolbar · footer hộp thoại · biểu mẫu.
2. Thẻ trạng thái
.bnn-tag · --ok/--warn/--err/--info · --act
Nhãn lozenge kèm chấm màu theo trạng thái; bản `--act` bấm được để lọc nhanh. Dùng ở: danh sách đơn · chi tiết đơn · bảng quản trị.
3. Chip lọc và huy hiệu số
.bnn-chip · __n · __x · --on · .bnn-badge · --navy/--primary/--dot/--act
Chip lọc có bộ đếm + nút xoá, huy hiệu số và nhãn nhỏ cho số thông báo. Dùng ở: bộ lọc danh sách · sidebar · tab chi tiết.
4. Thẻ nội dung
.bnn-card · __head/__title/__sub/__body/__foot · --flat/--link
Khối dashboard, cột board và panel tóm tắt; `--flat` cho nền chìm, `--link` cho thẻ mở được. Dùng ở: dashboard · board kanban · tóm tắt đơn.
Đơn giao hàng
Đã giaoBN-240916-10428 · 16/10/2026 · 15:37
Cột cần xử lý
4Cập nhật 15:40
5. Bảng dữ liệu
.bnn-table-wrap · .bnn-table · .bnn-num · .bnn-mono
Đầu bảng dính (sticky), hàng cao 40 px, cột số canh phải, mã đơn dùng chữ đẳng khoảng. Dùng ở: danh sách đơn · người dùng · nhật ký quản trị.
| Mã đơn | Khách hàng | Dịch vụ | Tài xế | Cước | Trạng thái |
|---|---|---|---|---|---|
| BN-240916-10428 | Trần Thị Bích | Xe máy · Giao hàng | Nguyễn Văn An | 78.000 ₫ | Đã giao |
| BN-240916-10427 | Lê Quang Bảo | Xe tải · 1,25 tấn | Trần Đình Nam | 640.000 ₫ | Đã giao |
| BN-240916-10426 | Phạm Thu Hà | Xe máy · Đi chợ hộ | — | 96.500 ₫ | Chờ tài xế |
| BN-240916-10424 | Vũ Minh Tuấn | Xe tải · 2 tấn | Lê Quang Bảo | 1.240.000 ₫ | Đang xử lý |
| BN-240916-10421 | Đỗ Thị Lan | Xe máy · Thực phẩm | — | 0 ₫ | Thất bại |
6. Biểu mẫu
.bnn-field · __label/__req/__hint/__err · --error
Input, select, textarea với nhãn, gợi ý, dấu bắt buộc và trạng thái lỗi (viền đỏ + nền nhạt). Dùng ở: tạo đơn · cài đặt · màn quản trị.
7. Chuyển chế độ
.bnn-seg · .bnn-seg-btn · hook `data-bnn-seg`
Segmented một-chọn: ô đang chọn là bề mặt đặc chữ sáng; `bnnUI` phát sự kiện `bnn:seg`. Dùng ở: đổi loại xe · đổi chế độ xem board/list/timeline.
Đang chọn: Xe máy
8. Các bước
.bnn-steps · .bnn-step · .bnn-step-line · is-done/is-now
Thanh 1-2-3 với bước đã xong (đặc) và bước đang làm (viền accent). Dùng ở: wizard tạo đơn · luồng onboarding.
Bước 1 đã xong, đang ở bước 2 — chưa cấu hình điểm giao.
Biến thể lỗi (`is-err`): bước 2 bị từ chối — CCCD mờ, cần tải lại ảnh.
9. Tab
.bnn-tabs · .bnn-tab · hook `data-bnn-tabs`
Tab gạch chân 2 px; `bnnUI` gán `role=tab`/`aria-selected` và ẩn/hiện `tabpanel` theo `aria-controls`. Dùng ở: chi tiết đơn (Thông tin/Lịch sử) · màn quản trị.
- Người nhận
- Trần Thị Bích · 0905 112 334
- Điểm giao
- 12 Nguyễn Huệ, Quận 1, TP.HCM
- Cước
- 78.000 ₫
3 địa điểm đã lưu: Nhà riêng · Công ty · Kho Tân Bình.
2 tài xế yêu thích: Nguyễn Văn An · Lê Quang Bảo.
10. Công tắc
.bnn-switch > input + span · hook `data-bnn-switch`
Công tắc 46×26, núm 20 px; có biến thể lỗi (`is-err`) và trạng thái vô hiệu. Dùng ở: chính sách · thông báo · cài đặt.
Trạng thái gần nhất: chưa đổi
11. Mã OTP 6 ô
.bnn-otp · .bnn-otp-cell · hook `data-bnn-otp`
Sáu ô 46×54 px, tự nhảy ô khi nhập, dán cả mã cũng được, phát `bnn:otp` khi đủ 6 ký tự. Dùng ở: 27 trang xác thực `auth-*`.
Mã đã nhập: —
Dán cả mã 6 số vào ô bất kỳ cũng được — `bnnUI` tự rải ký tự vào các ô.
Biến thể lỗi (`is-err`, ô tĩnh `<i>`): mã 482190 sai hoặc đã hết hạn — viền đỏ cả 6 ô.
Biến thể khoá (`is-disabled`): chờ 60 giây mới được gửi lại mã.
12. Chọn kích thước
.bnn-sizes · .bnn-size · .bnn-size-label/.bnn-size-sub
Thẻ chọn cỡ S→2XL kèm kích thước kiện hàng thật (cm). Dùng ở: form dịch vụ · cài đặt đơn.
Biến thể lỗi (`is-err`): cỡ L vượt hạn mức 50 kg của xe máy; 2XL vô hiệu vì dịch vụ không hỗ trợ.
13. Thông báo nổi
.bnn-toast · -ic/-x · .bnn-toast-stack · hook `data-bnn-toast`
Toast trạng thái ok/warn/err/info; nút demo gọi `bnnUI.toast()` chèn vào `.bnn-toast-stack`. Dùng ở: lưu thiết lập · lỗi mạng · cảnh báo hạn mức.
14. Sheet đáy và hộp thoại
.bnn-sheet · -panel/-grab/-head/-body/-foot · .bnn-modal · -card/-head/-body/-foot · hook `data-bnn-open`
Bottom sheet và hộp thoại có scrim; mở/đóng bằng `data-bnn-open` / `data-bnn-close`, có trap focus + phím Esc. Dùng ở: chi tiết đơn · bộ lọc · xác nhận xoá.
15. Ngăn kéo chi tiết
.bnn-drawer · -scrim/-panel/-head/-title/-body/-foot/-close · --drawer-left/--drawer-bottom
Panel trượt phải (mặc định), trái (`bnn-drawer-left`) hoặc từ đáy (`bnn-drawer-bottom`). Dùng ở: panel chi tiết · nhật ký kiểm toán.
Bộ lọc nâng cao
Chi tiết đơn BN-240916-10428
-
Tài xế đã nhận đơn
15:24 · 16/10/2026
-
Đã lấy hàng
15:31 · 16/10/2026
-
Giao thành công
15:37 · 16/10/2026
Nhật ký kiểm toán
16. Trạng thái rỗng
.bnn-empty · -icon/-title/-text/-actions
Khối rỗng có icon tròn, tiêu đề, mô tả và hành động gợi ý. Dùng ở: board rỗng · hộp thư rỗng · tìm 0 kết quả.
Không có đơn nào khớp
Đang lọc “Chờ tài xế” trong 24 giờ qua. Bỏ bộ lọc hoặc mở rộng khoảng thời gian.
Cột cần xử lý đang trống
Không còn đơn quá hạn SLA nào ở khu vực Tân Bình.
17. Ảnh đại diện
.bnn-avatar · -ini/-xs/-sm/-lg/-xl/-stack/-more/-status/-ring
Avatar chữ cái đầu (không dùng ảnh), chồng nhóm, chấm trạng thái và viền thương hiệu. Dùng ở: người nhận · người tạo · thành viên nhóm.
Biến thể ảnh (`.bnn-avatar-img`): ảnh phủ kín vòng tròn (`object-fit: cover`), dùng khi tài xế có ảnh hồ sơ.
18. Khung chờ
.bnn-skel · -text/-title/-line/-circle/-rect/-card/-wave
Skeleton giữ đúng bố cục khi dữ liệu đang tải, có hiệu ứng sóng (tắt khi `prefers-reduced-motion`). Dùng ở: danh sách đang tải · thẻ KPI đang tải.
Đang tải danh sách đơn — khung chờ giữ đúng bố cục để CLS không nhảy.
19. Chỉ số KPI
.bnn-kpi · .bnn-stat · -grid/-label/-value/-unit/-delta/-up/-down/-icon
Ô chỉ số lớn với delta tăng/giảm, và biến thể stat có icon tròn. Dùng ở: dashboard · báo cáo · màn quản trị.
Đơn hôm nay
1.284 đơn
▲ 12,4% so với hôm qua
Giao đúng hạn
96,8%
▼ 0,6 điểm so với tuần trước
Tài xế xe máy online
312
Xe tải đang chạy
48
20. Danh sách khoá–giá trị
.bnn-kv · .bnn-kv-grid · .bnn-kv-row · .bnn-kv-k/__v/__mono
Hai kiểu: lưới `dl` (nhãn–giá trị) và danh sách hàng có đường kẻ cho panel chi tiết. Dùng ở: chi tiết đơn · hồ sơ · màn quản trị.
- Mã đơn
- BN-240916-10428
- Dịch vụ
- Xe máy · Giao hàng
- Khoảng cách
- 12,4 km
- Cước
- 78.000 ₫
21. Dòng thời gian
.bnn-timeline · .bnn-tl-item/-dot/-title/-time/-meta/-body
Trục dọc có chấm mốc cho lịch sử hoạt động và nhật ký. Dùng ở: lịch sử đơn · nhật ký kiểm toán.
-
Tạo đơn
15:12 · 16/10/2026
Đơn xe máy 12,4 km, cước tạm tính 78.000 ₫.
-
Tài xế nhận đơn
15:24 · 16/10/2026
-
Giao thành công
15:37 · 16/10/2026
22. Thanh tiến độ
.bnn-bar · -head/-label/-track/-fill · --ok/--warn/--err · -stack/-seg
Thanh tiến độ có nhãn %, biến thể màu theo ngưỡng và dạng chồng nhiều đoạn. Dùng ở: tiến độ epic · khối lượng tài xế · hạn mức.
23. Biểu tượng
.bnn-ic · -sm/-lg/-xl · -inline/-muted/-navy/-orange/-spin · sprite ``
39 biểu tượng nét 24×24 nằm trong sprite tự chứa inline — 0 request phát sinh. Dùng ở: mọi màn (thay bộ icon Atlassian).
.bnn-ic-xl
.bnn-ic-muted
.bnn-ic-orange
.bnn-ic-spin
Cỡ `-xl` 32 px (nét 1,8), màu `-muted` (chữ phụ), `-orange`, và `-spin` quay 1 vòng/giây (dừng khi `prefers-reduced-motion`).
24. Băng cảnh báo
.bnn-alert · --info/--ok/--warn/--err/--banner · __ic/__msg/__close/__title/__actions
Băng thông tin/cảnh báo/lỗi có viền trái theo màu trạng thái, nút đóng và biến thể banner có hành động. Dùng ở: thông báo cập nhật · cảnh báo hạn mức · lỗi kết nối.
6 màn lõi dùng bộ component này
apps-jira-list.html · apps-projects-backlog.html · apps-projects-timeline.html · apps-projects-team-board.html · apps-issue-tracker.html · admin-workspace.html
Mỗi màn được phủ lại bằng chính các component ở trên — bấm để mở trang thật.
- Danh sách (List)Bảng đơn + thẻ trạng thái + chip lọc + phân trang
- Nhóm việc tồn (Backlog)Kéo thả ưu tiên + ô tìm kiếm
- Dòng thời gian (Timeline)Cột mốc theo tuần + thanh tiến độ
- Bảng nhóm (Team board)Cột kanban + thẻ + avatar chồng nhóm
- Danh sách issueIssue + thẻ trạng thái + hộp thoại chi tiết
- Bảng điều khiển quản trịBảng + biểu mẫu + KPI + nhật ký
25. Menu thả xuống
.bnn-dd · .bnn-menu · hook `data-bnn-dropdown` / `data-bnn-dd-toggle` / `data-bnn-dd-menu` / `data-bnn-dd-item`
`bnnUI.dropdown()` gán `aria-haspopup/aria-expanded/aria-controls`, portal menu ra `<body>` khi mở, mũi tên/Home/End chạy giữa các mục, Esc hoặc Tab đóng, phát `bnn:dropdown`. Dùng ở: sắp xếp hàng đợi (aha.html) · tuỳ chọn khác trên thẻ.
Menu: đóng · chọn: Ưu tiên giảm dần