kit.css và biến của tokens.base.css. Ba ô chọn ở thanh trên đổi bộ token: Dáng (bo góc, bóng), Màu (bảng màu) và Font ghép tự do với nhau, mỗi bảng màu đã qua check-palette.mjs. Mặc định (base) là dáng mềm, màu ink, font Inter Display.Màu nền, chữ, trạng thái.
icons.svg: 168 icon nét thường và 14 icon đặc (hậu tố -fill, dùng cho mục đang chọn). .icon là 20 px, .icon-sm 16 px, .icon-lg 24 px; màu theo chữ xung quanh..btn + -primary -danger -danger-solid -ghost -link, cỡ -sm -lg, -icon, -block, -group. Trạng thái: :disabled, aria-busy="true"..btn giữ. Trong .btn-sm biểu tượng tự nhỏ còn 16 px. Nút chỉ có biểu tượng dùng .btn-icon và bắt buộc có aria-label. Khi aria-busy="true" vòng quay thay biểu tượng..field > .label + .input .select .textarea + .field-hint / .field-error; .form-grid, .check, .switch, .form-actions. Lỗi dùng aria-invalid="true"..form-cols là lưới 12 cột; mỗi .field lấy .c-3, .c-4, .c-6 hoặc .c-8 cột (không có lớp: cả hàng). Khi bản thân biểu mẫu hẹp dưới 36rem, trong hộp thoại hẹp cũng như trên điện thoại, mọi ô chiếm cả hàng. Dùng .form-grid khi các ô bằng nhau.
Trên: đủ rộng, các ô theo số cột. Dưới: cùng kiểu trong khung 28rem, mỗi ô một hàng.
.number-stepper[data-stepper] do kit.js điều khiển, cho số nguyên trong khoảng ngắn (chọn thay cho một hàng chip khi chỉ có vài giá trị). data-min (mặc định 0), data-max (mặc định không giới hạn) và data-step-by (mặc định 1) đặt trên khung. Gõ số rồi rời ô thì số được kẹp vào khoảng; chữ không phải số thì giữ giá trị cũ. Nút ra ngoài khoảng có aria-disabled="true" nhưng vẫn giữ tiêu điểm. ↑ ↓ trong ô tăng giảm, Home và End về hai đầu. Giá trị ở data-value; ô bắn input và change.
.combo bọc input.input[role="combobox"] và danh sách ul.combo-list[role="listbox"][popover="manual"] gồm các li.combo-option[role="option"] (.combo-sub cho mã phụ, aria-disabled="true" cho mục khóa, .combo-empty khi không khớp). Gõ để lọc, không cần gõ dấu ("phu thanh" khớp "Phú Thành"); mũi tên chọn, Enter lấy, Esc đóng; rời ô thì chữ trở về mục đã chọn. Danh sách là popover nên bảng hay hộp thoại không cắt nó: đặt nó trong cùng hộp thoại với ô nhập. Dùng khi danh sách dài hơn khoảng 10 mục; ngắn hơn thì dùng .select. Kit lo hình thức, tenant lo lọc, chọn và vị trí (mẫu ở cuối trang)..datepicker[data-datepicker] chứa input.input (gõ dd/mm/yyyy, hoặc 8 chữ số liền như 05102026), button.datepicker-btn (aria-haspopup="dialog") và .calendar[popover="manual"][role="dialog"]: .calendar-head (tháng trước, chọn tháng, chọn năm, tháng sau), table.calendar-grid[role="grid"] với td[role="gridcell"] chứa .calendar-day, .calendar-foot (Hôm nay, Xóa). Ngày được giữ ở data-value dạng yyyy-mm-dd; data-min, data-max tắt các ngày ngoài khoảng, data-min-input và data-max-input lấy giới hạn từ ô ngày khác (khoảng từ – đến). Ô tự bắn input và change khi ngày đổi; nên nghe change. Trong lịch: ← → ↑ ↓ đổi ngày hoặc tuần, Home và End về đầu và cuối tuần, Page Up và Page Down đổi tháng (thêm Shift thì đổi năm), Enter chọn, Esc đóng. Gõ sai hoặc ngoài khoảng thì ô có aria-invalid="true"; thông báo lỗi là việc của tenant (data-error trỏ tới phần tử lỗi). Khoảng ngày bằng một lịch: .daterange[data-daterange] chứa hai input.daterange-input (từ, đến, mỗi ô giữ data-value), .range-sep, button.datepicker-btn và .calendar.calendar-range: .calendar-presets (các nút .calendar-preset[data-preset]: today, yesterday, 7d, 30d, month, lastmonth, quarter, year; tenant bỏ bớt tùy ý), .calendar-months với hai .calendar-month (dưới 48rem chỉ một tháng, nút chọn nhanh thành hàng), .calendar-foot (gợi ý, Xóa). Bấm ngày đầu rồi ngày cuối (đảo thứ tự cũng được), các ngày giữa được tô; rê chuột hoặc dùng phím mũi tên sẽ xem trước. Chỉ khi chọn xong ngày cuối thì hai ô mới đổi và mới bắn input, change (ô nào đổi thì bắn ô đó, sau khi cả hai đã có giá trị mới). Esc bỏ lần chọn dở. Nút chọn nhanh trùng khoảng đang có thì aria-pressed="true"; nằm ngoài data-min, data-max thì aria-disabled. Gõ vào từng ô cũng được: đầu đến trước đầu từ thì ô đó aria-invalid="true".| T2 | T3 | T4 | T5 | T6 | T7 | CN |
|---|
| T2 | T3 | T4 | T5 | T6 | T7 | CN |
|---|
Nhập ngày từ 01/10/2026 đến 31/12/2026, dạng ngày/tháng/năm.
| T2 | T3 | T4 | T5 | T6 | T7 | CN |
|---|
| T2 | T3 | T4 | T5 | T6 | T7 | CN |
|---|
| T2 | T3 | T4 | T5 | T6 | T7 | CN |
|---|
| T2 | T3 | T4 | T5 | T6 | T7 | CN |
|---|
| T2 | T3 | T4 | T5 | T6 | T7 | CN |
|---|
Nhập ngày dạng ngày/tháng/năm; ngày kết thúc không trước ngày bắt đầu.
Một ô, một lịch: bấm ngày bắt đầu rồi ngày kết thúc, hoặc chọn nhanh ở bên trái. Ô giới hạn đến 31/12/2026 (data-max). Trên: hai ô ngày ghép nhau, hợp khi mỗi đầu có nhãn và việc riêng.
Giờ 24, dạng 14:00
Giờ hạn viết dạng 14:00, phút từ 00 tới 59
input.input-time[data-time] do kit.js điều khiển: gõ 14:00, 1400, 930, 9h30 hoặc 14 đều thành HH:MM khi rời ô hoặc bấm Enter. Giờ chuẩn nằm ở data-value; giờ quá 23 hoặc phút quá 59 thì ô có aria-invalid="true" và hiện phần tử data-error. Ô tự bắn input và change.
Nhập tháng trong năm 2026, dạng tháng/năm.
.datepicker[data-monthpicker] do kit.js điều khiển: gõ 11/2026, 11-2026 hoặc 112026, hoặc bấm nút để chọn trong 12 tháng. Tháng được giữ ở data-value dạng yyyy-mm; data-min, data-max cùng dạng, tắt các tháng ngoài khoảng (ô thứ hai chỉ nhận năm 2026). Ô bắn input và change. Trong bảng chọn: ← → đổi tháng, ↑ ↓ đổi ba tháng, Page Up và Page Down đổi năm, Home và End về đầu và cuối năm, Enter chọn, Esc đóng.
ol.stepper > li.step[data-state="done|current|error|todo"] > .step-btn (là button khi người dùng được quay lại hoặc tới bước đó, là span khi chưa, bước hiện tại có aria-current="step") > .step-mark (số, dấu tích khi xong, "!" khi lỗi) + .step-label. Bốn kiểu bày cùng một danh sách: vòng tròn .stepper-circles (theo MultiStepIndicator của Vibe: vòng tròn nối nhau bằng vạch mảnh, chữ ở bên cạnh và có thể thêm .step-sub trong .step-text; bước hiện tại là vòng đặc có viền ngoài, bước xong là vòng đặc có dấu tích, bước chưa tới là vòng rỗng, bước lỗi giữ màu lỗi; .stepper-compact thu nhỏ vòng và chỉ giữ nhãn; dưới 40rem chỉ bước hiện tại còn chữ), ngang (kiểu mặc định, các ô trên nền xám như .tabs-pill, ô trắng là bước hiện tại; dưới 40rem chỉ bước hiện tại còn nhãn), dọc .stepper-vertical (cột nối bằng vạch, vạch tô màu thành công khi bước xong; mỗi bước có thể có .step-sub mô tả trong .step-text cùng nhãn và .step-meta bên phải cho ngày giờ), thanh tiến độ .stepper-bars (mỗi bước là một đoạn, nhãn nằm dưới, không có số). Bước xong màu thành công, bước lỗi màu lỗi, chữ cùng cỡ chữ thân trang; trạng thái luôn có chữ hoặc dấu hiệu ngoài màu (tích, "!", chữ ẩn "(đã xong)", "(có lỗi)"). Tiến độ chung: .wizard-progress gồm "Bước 2/4", một .bar (--v là phần đã đi) và phần trăm. Biểu mẫu chia bước: trong hộp thoại (.wizard-steps dưới phần đầu, chân có .modal-foot-start cho nút Hủy) hoặc trên trang (.wizard-page: thẻ bước dọc bên trái, thẻ biểu mẫu bên phải có tiến độ ở đầu, Quay lại và Tiếp tục ở chân; dưới 48rem các bước nằm ngang phía trên). Mỗi bước là một .wizard-panel (chỉ bước hiện tại hiện, có h3 để chuyển focus tới). Bấm Tiếp tục kiểm tra các ô required của bước đó: ô thiếu có aria-invalid và thông báo .field-error, bước chuyển sang lỗi và focus vào ô đầu tiên; Quay lại hoặc bấm bước đã qua thì không kiểm tra. Trang xác nhận ở bước cuối liệt kê các ô đánh dấu data-sum. Đóng hộp thoại là mất dữ liệu đã nhập; tenant nên hỏi xác nhận khi đã nhập dở.Kiểu Vibe, .stepper-circles. Trên: nhãn và mô tả. Giữa: gọn, .stepper-compact. Dưới: thanh hẹp, chỉ bước hiện tại giữ chữ. Bước đã xong và bước lỗi bấm được để quay lại.
Cùng dạng vòng tròn với bản ngang. Trái: có mô tả và ngày giờ. Phải: chỉ nhãn, để làm cột bước bên cạnh biểu mẫu.
.panel có .panel-head.panel-head-part: .part-num (số trong vòng tròn; .part-num-ok với icon dấu tích khi phần đã đủ), tiêu đề, và .panel-meta ở cuối dòng (đã nhập bao nhiêu). Nhóm chọn dạng thẻ là .choice-cards > label.choice-card chứa input[type="radio"] thật, nên bàn phím và trình đọc màn hình dùng như nhóm radio thường. .chip-dashed đổi viền chip sang nét đứt cho giá trị khác loại. .input-affix > .input + .affix giữ chữ cố định trong khung ô. label.confirm là hộp tích xác nhận: màu hổ phách cho đến khi tích, rồi xanh lá.Phần 1 và 2: số trong vòng tròn, phần đã đủ đổi sang dấu tích xanh. Cỡ Ø16 tròn trơn có viền nét đứt vì khác loại với hai cỡ vằn. Hộp xác nhận ở phần 3 tích được: thử bấm.
label.dropzone là cả vùng thả: ô input type="file" nằm trong nó và ẩn bằng .visually-hidden nên bàn phím và hộp chọn tệp của trình duyệt vẫn chạy, nhãn của ô là tiêu đề cộng dòng gợi ý. Tenant đặt data-over lúc đang kéo tệp qua, aria-invalid="true" trên ô khi từ chối tệp và lý do trong .field-error. Tệp đã chọn nằm dưới trong ul.file-list: mỗi tệp một li.file-item với data-state="done|uploading|error"; trạng thái luôn có chữ ở dòng phụ (không chỉ màu), và đang tải thì thêm .bar.Thử kéo một tệp .xlsx vào vùng trên, hoặc một tệp khác loại (.pdf) để xem lỗi: tệp đạt vào danh sách là đã chọn, tệp bị từ chối có lý do bằng chữ và ô báo lỗi. Ở đây không có gì rời khỏi trang; tenant tự tải lên và tự đổi data-state theo tiến độ.
Hai trạng thái còn lại: báo lỗi (viền đỏ, lý do ở dưới) và không dùng được.
.panel (-head -body -foot -flush), .tbl-wrap > .tbl (-compact -dense, cột số dùng .num), .tag (-ok -warn -bad -info -draft). Hai kiểu khác của cùng nhãn: -solid (đặc) cho một trạng thái cần nặng hơn các trạng thái còn lại trong cột, ví dụ phiếu đã phát hành; -bare (không nền, không viền) cho cột mà dòng nào cũng có nhãn thì bảng rối, ví dụ kết luận đặt cạnh trạng thái; nó là cùng nhãn, cùng cỡ chữ. Trong bảng mọi nhãn cao hơn một bước (--fs-sm) cho khớp chữ của bảng. Chip mã đứng trước tên là .code-chip trong .cell-lead. Nhãn kết quả khác nhau bằng hình chứ không chỉ bằng màu: tròn có dấu tích (đạt), vuông có dấu X (không đạt), tròn nét đứt (chưa đủ số liệu), thoi (không đánh giá), tròn gạch chéo (đã hủy). Màu của trạng thái chờ do tenant chọn: mặc định -warn và clock, nhưng tenant có hai trạng thái cần chú ý (chờ duyệt và bị trả lại) có thể cho chờ duyệt -info và bị trả lại -warn, rồi giữ nguyên ở mọi nơi.5 phiếu gần nhất
| Số phiếu | Khách hàng | Trạng thái | Kiểm hàng | Số lượng (kg) | Thành tiền (₫) | Thao tác |
|---|---|---|---|---|---|---|
PN-0012Ớt bột | Công ty Phú Thành | Đã duyệt | 1.250,500 | 12.450.000 | ||
PN-0013Tiêu xay | Nguyễn Văn An | Chờ duyệt | 4,162 | 3.280.000 | ||
PN-0014Muối tinh | Cửa hàng Minh Sơn | Bị từ chối | 0,350 | 890.000 | ||
PN-0015Bao bì 500 g | Trần Thị Bình | Bản nháp | 12,000 | 1.020.000 | ||
PN-0016Ớt bột | Hợp tác xã Nga Thanh | Đã hủy | 0,000 | 0 |
Cột đầu có chip mã (.code-chip trong .cell-lead): mã mặt hàng ngắn, hộp viền chữ đơn cách, để quét cột theo loại; tên mặt hàng vẫn nằm ở dòng phụ nên chip là aria-hidden. Trạng thái là nhãn có nền, kiểm hàng là nhãn không nền (.tag-bare): hai cột cạnh nhau vẫn đọc được, không thành hai hàng nhãn viên thuốc.
| Cỡ | Sai số KL | Chảy nhỏ nhất (MPa) | Bền nhỏ nhất (MPa) | A5 nhỏ nhất (%) |
|---|---|---|---|---|
| D6CB240-T | −1,6 … −0,9 %± 8 % | 311,0≥ 240 | 455,8≥ 380 | 25,3≥ 20 |
| D10CB300-V | −1,1 … −0,4 %± 6 % | 318,5≥ 300 | 459,9≥ 450 | 22,0≥ 19 |
.tbl-th-wrap: tiêu đề cột được xuống dòng, nên bảng có tiêu đề dài (kèm đơn vị) trên số ngắn vừa một cột hẹp mà không phải cuộn ngang. Ô số dạng khoảng giữ một dòng bằng .nowrap.
.tag + -ok -warn -bad -info, .tag-draft nét đứt, icon đứng trước chữ. Bốn nhãn cuối là .tag-bare: cùng nhãn, cùng cỡ chữ, bỏ nền và viền, mỗi kết quả một hình riêng.tag-solid, một mình là màu mực.tag.delta.tbl: .tbl-sticky (đầu và dòng tổng dính, cần .tbl-scroll có chiều cao), .tbl-sticky-col (cột đầu dính; thêm .tbl-select thì cột chọn và cột sau nó cùng dính), .tbl-grid (kẻ ô), .tbl-zebra, tfoot (tổng), .th-sort + aria-sort, tr[aria-selected="true"] + .cell-check, .row-void, td.trunc; trong ô: .cell-sub (dòng phụ), .cell-metric với .bar (thanh tỷ lệ) hoặc .tag.delta (tăng giảm), td.nowrap.tnum (ngày giờ), td.cell-fill (ô tô màu); quanh bảng: .tbl-tools, .bulk-bar, .pager. Bảng dưới cuộn được cả hai chiều: thử chọn dòng, bấm tiêu đề cột để sắp xếp, bấm dấu ⋮ cuối dòng để mở menu thao tác, đổi kiểu bảng bằng các nút bên dưới. Cột Số lượng có thanh so với phiếu nhập nhiều nhất, cột Đơn giá có mức tăng giảm so với lần nhập trước (màu theo ý nghĩa, mũi tên theo chiều: giá nhập tăng là xấu nên đỏ, giảm là tốt nên xanh), cột Nhà cung cấp có mã ở dòng phụ.| Kho | Trạng thái | Kiểm hàng | Đơn giá (₫)so với lần nhập trước | Ghi chú | Thao tác | |||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| PN-0101 | 01/10/2026 08:30 | Công ty Phú ThànhNCC-012 | lienhe@phuthanh.vn | Kho 1 | Đã duyệt | Đạt | 1.250,500 | 18.500Tăng 3,4% | 23.134.250 | Hàng đợt 1, đã kiểm đủ số lượng theo hợp đồng số 24/HĐ-2026 | ||
| PN-0102 | 02/10/2026 09:15 | Cửa hàng Minh SơnNCC-007 | info@minhson.vn | Kho 2 | Đã duyệt | Đạt | 4,162 | 95.000Giảm 3,1% | 395.390 | Giao tại kho | ||
| PN-0103 | 03/10/2026 14:00 | Hợp tác xã Nga ThanhNCC-031 | ketoan@ngathanh.vn | Kho 1 | Chờ duyệt | Chờ kết quả | 320,000 | 42.000Giảm 4,5% | 13.440.000 | Chờ phiếu kiểm nghiệm | ||
| PN-0104 | 04/10/2026 10:45 | Nguyễn Văn AnNCC-044 | an.nguyen@email.vn | Kho 1 | Đã duyệt | Đạt | 0,350 | 1.200.000Tăng 4,3% | 420.000 | |||
| PN-0105 | 05/10/2026 16:20 | Trần Thị BìnhNCC-052 | binh.tran@email.vn | Kho 2 | Bản nháp | Chưa đủ số liệu | 75,250 | 31.000Giảm 6,1% | 2.332.750 | Chưa chốt giá | ||
| PN-0106 | 06/10/2026 08:05 | Công ty Phú ThànhNCC-012 | lienhe@phuthanh.vn | Kho 1 | Đã duyệt | Đạt | 980,000 | 18.500Không đổi 0,0% | 18.130.000 | Hàng đợt 2 | ||
| PN-0107 | 07/10/2026 11:30 | Cửa hàng Minh SơnNCC-007 | info@minhson.vn | Kho 2 | Đã hủy | Không đạt | 12,000 | 95.000Không đổi 0,0% | 1.140.000 | Nhập nhầm kho, đã lập lại phiếu PN-0108 | ||
| PN-0108 | 07/10/2026 13:10 | Cửa hàng Minh SơnNCC-007 | info@minhson.vn | Kho 1 | Đã duyệt | Đạt | 12,000 | 95.000Tăng 3,3% | 1.140.000 | |||
| PN-0109 | 08/10/2026 09:40 | Công ty Thanh NhànNCC-060 | kinhdoanh@thanhnhan.vn | Kho 2 | Chờ duyệt | Cần xem lại | 2.100,750 | 15.200Giảm 5,6% | 31.931.400 | Giá theo bảng giá tháng 10 | ||
| PN-0110 | 09/10/2026 15:25 | Hợp tác xã Nga ThanhNCC-031 | ketoan@ngathanh.vn | Kho 1 | Đã duyệt | Đạt | 640,500 | 42.000Tăng 3,7% | 26.901.000 | |||
| PN-0111 | 10/10/2026 10:10 | Nguyễn Văn AnNCC-044 | an.nguyen@email.vn | Kho 2 | Đã duyệt | Không đạt | 1,000 | 2.500.000Giảm 5,7% | 2.500.000 | Thiết bị đo | ||
| PN-0112 | 12/10/2026 17:05 | Trần Thị BìnhNCC-052 | binh.tran@email.vn | Kho 1 | Bản nháp | Chưa đủ số liệu | 18,125 | 31.000Tăng 5,1% | 561.875 | |||
| Tổng | 11 phiếu, không tính phiếu hủy | 5.402,637 | 120.886.665 | |||||||||
Cột Kiểm hàng là ô tô màu như cột Status của một bảng việc: td.cell-fill + -ok -warn -bad -info (không thêm màu là xám), bên trong .cell-fill-label chứa icon và chữ. Cả ô lấy màu, chữ ở giữa, một viền màu nền của dòng giữ các ô cách nhau; ô vẫn giữ màu khi dòng sọc, được rê chuột hoặc được chọn, còn dòng đã hủy bỏ màu để chữ gạch ngang đọc được.
.tbl-grid + td.cell-edit chứa .cell-input. Trạng thái: ô đang chọn td[aria-selected="true"], ô đã sửa .cell-dirty, ô lỗi td[aria-invalid="true"], ô chỉ đọc (công thức) .cell-ro. Kit chỉ lo hình thức; phím mũi tên, dán nhiều dòng và lưu do tenant xử lý. Bấm vào một ô để thấy ô đang chọn.| STT | Mã hàng | Tên hàng | ĐV | Số lượng | Đơn giá (₫) | Thành tiền (₫) |
|---|---|---|---|---|---|---|
| 1 | 6.266.000 | |||||
| 2 | 7.350.000 | |||||
| 3 | — | |||||
| 4 | 2.760.000 | |||||
| 5 | — |
.skel thay chữ trong lúc tải (đặt aria-busy="true" lên bảng); bảng trống là một dòng .tbl-empty chứa .empty.| Số phiếu | Nhà cung cấp | Trạng thái | Thành tiền (₫) |
|---|---|---|---|
| Số phiếu | Nhà cung cấp | Trạng thái | Thành tiền (₫) |
|---|---|---|---|
Không có phiếu nào khớp Bỏ bớt bộ lọc hoặc tạo phiếu mới. | |||
.tbl-cards vào .tbl-wrap và data-label (tên cột) vào mỗi td. Khung rộng dưới 36rem thì mỗi hàng thành một thẻ: ô đầu (th scope="row") là tiêu đề, các ô còn lại xếp hai cột với nhãn trên giá trị, nút của hàng (td.actions) nằm dưới cùng, ô chọn lên góc. Rộng hơn thì vẫn là bảng. Khung bọc là container nên một bảng trong cột hẹp cũng đổi, không chỉ trên điện thoại. Dùng cho bảng thường: không kèm -sticky, -select hay .tbl-scroll. Hàng tiêu đề vẫn còn cho trình đọc màn hình.| Số phiếu | Khách hàng | Trạng thái | Số lượng (kg) | Thành tiền (₫) | Thao tác |
|---|---|---|---|---|---|
PN-0012Ớt bột | Công ty Phú Thành | Đã duyệt | 1.250,500 | 12.450.000 | |
PN-0013Tiêu xay | Nguyễn Văn An | Chờ duyệt | 4,162 | 3.280.000 | |
PN-0014Muối tinh | Cửa hàng Minh Sơn | Bị từ chối | 0,350 | 890.000 |
| Số phiếu | Khách hàng | Trạng thái | Số lượng (kg) | Thành tiền (₫) | Thao tác |
|---|---|---|---|---|---|
PN-0012Ớt bột | Công ty Phú Thành | Đã duyệt | 1.250,500 | 12.450.000 | |
PN-0013Tiêu xay | Nguyễn Văn An | Chờ duyệt | 4,162 | 3.280.000 | |
PN-0014Muối tinh | Cửa hàng Minh Sơn | Bị từ chối | 0,350 | 890.000 |
Cùng một bảng, hai độ rộng khung: dưới 36rem là thẻ, trên đó là bảng. Ô td.actions không có data-label nên không có nhãn; ô th đầu là tiêu đề của thẻ.
.list-filters xếp ba phần cách nhau: .panel chứa .filter-bar, hàng .filter-active và .result-bar. Trong .filter-bar mỗi .field có bề rộng riêng (--field-w, mặc định 13rem), .filter-grow cho ô tìm lấy phần còn lại. Ô tìm có icon là .input-icon; khoảng ngày là .range (hai ô quanh .range-sep, nhóm có role="group" và aria-labelledby). Mỗi bộ lọc đang bật là một .chip.chip-value với nút .chip-x (aria-label nói rõ bỏ bộ lọc nào), cuối hàng là .btn.btn-link "Xóa lọc". .seg là nhóm radio dạng nút liền (role="radiogroup", .seg-item[role="radio"]) để đổi cách sắp xếp hay xem. Gallery nối sẵn các ô với chip; khi bỏ một chip, focus chuyển sang chip kế tiếp..avatar (-xs -sm -lg -xl, -square, màu -primary -ok -warn -bad -info) chứa chữ cái đầu hoặc <img>; .avatar-dot báo trạng thái trực tuyến (ghi chữ trong .visually-hidden, vì màu một mình không nói gì); .avatar-group chồng nhiều người; .avatar-label ghép avatar với tên và một dòng phụ. Cạnh tên thì avatar chỉ để trang trí (aria-hidden="true", alt=""); đứng một mình cần role="img" và aria-label. Chữ cái đầu do tenant tính.
màu, vuông, ảnh
.avatar-group
| Nhân viên | Vai trò | Trạng thái |
|---|---|---|
| Nguyễn Văn Anan.nguyen@email.vn | Kế toán | Đang làm |
| Trần Thị Bìnhbinh.tran@email.vn | Thủ kho | Đang làm |
| Lê Văn Cườngcuong.le@email.vn | Quản đốc | Nghỉ việc |
.panel sau .panel-head (tên bên trái, số lượng bên phải bằng .muted). ul.progress-list > li.progress-item > .progress-row (span, hoặc a / button khi bấm dòng để mở chỉ tiêu đó) > .progress-no (mã do tenant đặt: "1/.", "A.2") + .progress-label + một .tag kết quả, cùng nhãn trạng thái với bảng: tag-ok đạt, tag-warn cần xem lại, tag-bad không đạt, tag-draft chưa có. Kết quả là chữ trong nhãn nên không phụ thuộc màu. Dòng đang xem (aria-current="true") có nền tô và vạch bên trái như dòng được chọn của bảng, chữ in đậm. Khác thanh bước (.stepper): thanh bước là các bước làm lần lượt, còn đây là các mục độc lập, mỗi mục chỉ báo kết quả của nó.Trái: bấm dòng để chuyển dòng đang xem. Phải: dòng không bấm được, đủ bốn kết quả.
dl.dl > div > dt + dd. Mỗi hàng đặt nhãn và giá trị cạnh nhau khi đủ chỗ, và nhãn nằm trên giá trị khi hẹp (cột bên, điện thoại), nên không cần điểm ngắt riêng. -lines kẻ một vạch giữa các hàng, -tight là cỡ nhỏ cho cột bên; --dl-key đổi độ rộng nhãn, --dl-val độ rộng tối thiểu của giá trị. Dùng thay bảng hai cột cho thông tin của một bản ghi (phiếu, công trình, khách). Lịch sử: ol.timeline > li.timeline-item > .timeline-mark (phiên bản, ví dụ v9, trong một viên; dòng không có thì có một chấm) và .timeline-body > .timeline-title (điều đã đổi), .timeline-meta (ai và lúc nào, span và time cách nhau một dấu chấm giữa; nhãn .tag đứng đầu nếu có), .timeline-note (lý do, trong hộp nền nhạt). Dòng mới nhất là aria-current="true" (viên hoặc chấm tô màu chính). Dòng không được bỏ sót có data-tone="warn|danger|ok|info" (viên hoặc chấm và hộp lý do cùng sắc); sắc không phải dấu hiệu duy nhất, chính dòng phải nói điều gì đã đổi, và nên kèm một nhãn .tag. Khác thanh bước dọc (.stepper-vertical): thanh bước là tiến độ các bước làm lần lượt, còn đây là nhật ký các lần sửa, không có bước xong hay chưa. .timeline-feed là dạng dòng hoạt động quanh một bản ghi: mỗi dòng là ngày (time.timeline-date, chấm trên đường), hàng bo tròn .timeline-card (.timeline-ic + .timeline-text + nút mở ở cuối) và tùy chọn .timeline-detail (nhãn, giá trị, nút).Gửi duyệt lại
Uốn D25 mẫu 6: (trống) → Không nứt
Lý do: bổ sung nhận xét theo số thí nghiệm
Sai số KL D22: Không đạt → Đạt (thử lại 4 mẫu)
Lý do: thử lại theo TCVN 1651: mẫu 2, 3 rớt thật
D22 mẫu 1 khối lượng 1.685,0 → 1.785,0 g
Lý do: gõ nhầm số cân, số cân ghi 1.785,0 g
Gửi duyệt lần 1
Đã phát hành phiếu 486
Chuyển cho Trưởng phòng
Trả lại: thiếu ảnh chụp mẫu
Lý do: chưa có ảnh mẫu D22 sau khi thử lại
Đổi kết luận D22
Trái đến phải: .dl-lines ở cột chính, .dl-tight ở cột hẹp (nhãn trên giá trị khi không đủ chỗ), lịch sử kiểu nhật ký phiên bản (.timeline: viên số phiên bản .timeline-mark hoặc chấm, tiêu đề, dòng người và giờ, lý do trong hộp), bốn sắc của viên và hộp lý do, rồi dòng hoạt động (.timeline-feed: ngày, hàng bo tròn có icon và câu có nhãn, nút mở ở cuối, dòng chi tiết bên dưới).
ul.work-list > li > a.work-item (là div khi dòng không phải liên kết; cả dòng bấm được, rê chuột tô nền): một dấu đầu dòng (.code-chip, icon), .work-main và .work-end. .work-main có .work-title (.work-code đậm rồi .work-name), .work-sub (một dòng mờ, dài thì cắt bằng dấu ba chấm) và .work-reason (icon và một câu màu cảnh báo: vì sao dòng này cần xem). .work-end có trạng thái (.tag, một con số) và .work-meta (ngày, giờ). Đặt trong .panel-flush để các dòng chạy sát mép thẻ, ngăn nhau bằng một vạch. Dưới 26rem bề ngang của chính nó, phần cuối chuyển xuống dưới chữ. Dùng cho hàng đợi ở trang tổng quan: vài dòng, mỗi dòng một việc. Khi người xem cần so sánh các cột giữa nhiều dòng thì dùng bảng.Thẻ đủ rộng: trạng thái và thời gian nằm bên phải. Dòng có .work-reason là dòng lý do.
Thẻ hẹp (dưới 26rem): phần cuối nằm dưới chữ.
li.work-row: phần chữ là liên kết mở dòng, nút tích nằm riêng ở mép phải ở mọi độ rộng. Việc cần ảnh hiện nút máy ảnh thay cho nút tích, để người làm không gặp nút bấm mà không có tác dụng. Mỗi ảnh nói trạng thái bằng chữ, không chỉ bằng màu viền.Mép trái có vạch màu theo data-tone (Trễ, Chưa đạt); thẻ trạng thái luôn nói bằng chữ. Nút tích không co lại khi thẻ hẹp.
Chưa tích, đã tích (aria-pressed="true"), chụp ảnh (.tick-primary) và bị khóa (aria-disabled="true").
Đã nhận, đang gửi (thanh tiến độ .bar) và lỗi (viền đỏ, chữ nói rõ và nút Thử lại). Ảnh thật là <img> trong .thumb-img.
.thumb-list-sm: bốn ảnh trên một hàng ở điện thoại.
.media-strip: mỗi ảnh rộng 86% hàng (tối đa 26rem) nên ảnh kế hiện ở mép; vuốt bằng tay, hoặc Tab vào hàng rồi dùng phím mũi tên. Chữ dưới ảnh nói đó là ảnh nào và nhận lúc nào.
4 việc, đã xong 3
Lau quầy, quét sàn, đổ rác, kiểm tra nhà vệ sinh.
6 việc, chưa bắt đầu
Sắp xếp bàn ghế, lau cửa kính, hút bụi hành lang.
details.panel.panel-fold không cần script: summary.panel-head giữ tiêu đề, dòng phụ .panel-sub và biểu tượng .panel-caret ở cuối; .panel-body là phần mở ra. Thêm open để mở sẵn. Đóng thì đầu thẻ không có đường kẻ dưới; mở thì mũi tên quay lên.
ul.sort-list[data-sortable]: kéo tay cầm (chuột hoặc ngón tay), hoặc bấm nút mũi tên lên xuống, là cách không cần kéo (bàn phím, đọc màn hình). kit.js dời dòng, đọc vị trí mới (“Vệ sinh cửa hàng đầu ca: vị trí 2 trên 4”) và bắn change với detail là { item, from, to }. Dòng đầu mất nút lên, dòng cuối mất nút xuống (aria-disabled).
.paper-stage (bàn xám đặt các tờ giấy, cuộn ngang khi màn hình hẹp) > .paper (.paper-landscape xoay ngang) > nội dung, cùng .paper-no là số trang ở chân tờ. Tờ luôn trắng chữ đen, không theo palette, vì bản in cũng vậy. Tenant đặt font tài liệu và lề cần dùng trên .paper. Khi in, bàn và bóng đổ bị bỏ, mỗi tờ ngắt trang. Ví dụ dưới cắt ngắn tờ (min-height: 0) cho vừa trang gallery.Phiếu kết quả thí nghiệm
Số 486/LAS-XD 1222 · Ngày phát hành 30/10/2026
Công trình: Đường D3 nối dài, hạng mục cống hộp K0+350.
Mẫu: TH-D3-15, thép vằn D10–D16, lấy ngày 24/10/2026.
| Chỉ tiêu | Yêu cầu | Kết quả | Kết luận |
|---|---|---|---|
| Giới hạn chảy (MPa) | ≥ 400 | 452 | Đạt |
| Giới hạn bền (MPa) | ≥ 570 | 641 | Đạt |
Người thí nghiệmTrưởng phòng
1/1.kpi-row xếp nhiều thẻ trên lưới (mỗi thẻ từ 13rem). Trong .kpi chỉ có ba phần: .kpi-head (.kpi-label và .kpi-icon nếu cần), .kpi-value (số lớn, .kpi-unit cho đơn vị) và .kpi-foot (huy hiệu .tag.delta, chữ ngữ cảnh, thanh .bar nếu có tiến độ). Ba phần này giúp các thẻ cùng hàng thẳng hàng với nhau. Thẻ là <a> khi bấm vào mở danh sách sau con số. data-tone="ok|warn|danger" thêm vạch ở mép trái, dày bằng vạch của notice; chữ ở .kpi-foot nói cùng điều đó nên màu không đứng một mình. Số luôn nằm trên một dòng: từ 100.000 trở lên viết gọn (k nghìn, M triệu, B tỷ, một số lẻ, dấu phẩy), số đầy đủ để trong .visually-hidden cho trình đọc màn hình và title cho chuột. Một hàng viết cùng một kiểu, nên cả hàng viết gọn khi có một thẻ cần. Nếu thẻ là cái chuyển nội dung bên dưới, dùng .kpi-tabs.128.450.000 đồng
Tăng 12,4% so với tháng 9
6
3 phiếu đã chờ quá 2 ngày
34.200.000 đồng
Giảm 7,1% 4 khách quá 30 ngày
94,2%
Thẻ thứ hai và thứ ba là liên kết (rê chuột đổi nền) và có vạch màu; thẻ đầu và thẻ cuối không phải liên kết. Số tiền từ 100.000 trở lên viết gọn nên không bị xuống dòng. Huy hiệu tăng giảm dùng .tag.delta của kit: ở thẻ công nợ, giảm là tốt nên huy hiệu để màu xanh.
845.200₫
Giảm 4,2% so với tháng 9, thấp nhất từ đầu năm
94,2%
Đạt mục tiêu
Hai thẻ cùng hàng, tên thẻ đầu dài hai dòng và dòng chân dài hơn: thẻ cao bằng nhau, số và dòng chân của hai thẻ vẫn thẳng hàng. Số dưới 100.000 viết đủ.
.kpi-tabs: các thẻ là bộ chuyển cho phần bên dưới. Thẻ đang chọn nổi lên trên nền chìm, như .seg; bấm hoặc dùng phím mũi tên, Home, End để đổi. Thẻ là <button role="tab"> nên ba phần bên trong viết bằng <span>, và không dùng data-tone ở đây.
7:18
Ca sáng 7:00 – 15:00, đã làm 3 giờ 12 phút
0giờ
Chưa vào ca
Wifi quán
Chưa khớp mạng cửa hàng đã lưu, nên chưa thể vào ca
.kpi-action đặt sau .kpi-foot, chứa một hoặc hai .btn. Thẻ có nút là div.kpi, không phải a.kpi. Trong một hàng, thẻ không có nút vẫn cao bằng thẻ có nút và số vẫn thẳng hàng, chỉ thừa chỗ dưới dòng chân.
.stat là ô số liệu nhỏ (.stat-head với .stat-ic và .stat-label, rồi .stat-value và .stat-unit); .stat-row xếp nhiều ô. .ring là vòng tiến độ vẽ bằng --p (phần trăm), chữ ở giữa là .ring-v, cỡ .ring-sm .ring-lg, màu .ring-ok .ring-warn .ring-bad; role="progressbar" kèm aria-valuenow. .chart là biểu đồ cột: số in ngay trên mỗi cột và aria-label của figure đọc lại cả dãy bằng một câu, nên chiều cao không phải nơi duy nhất mang số. Cột đang xét có aria-current="true". Hình minh họa: <svg class="empty-spot" aria-hidden="true"><use href="spots.svg#spot-empty"/></svg>, bốn hình là spot-empty, spot-search, spot-lock, spot-offline, vẽ riêng cho kit này.Thứ Sáu, 31 tháng 10
18việc
5việc
2việc
128.450.000 đồng
Đi làm 22 trên 23 ngày
Thứ Hai đến Chủ nhật
Việc quản lý giao sẽ hiện ở đây.
Thử từ khóa ngắn hơn hoặc bỏ bớt bộ lọc.
Hỏi quản trị viên để được cấp quyền.
Việc đã nhập vẫn được giữ trên máy và sẽ gửi khi có mạng.
.notice (-ok -warn -danger -info, -compact một dòng) gồm svg.notice-icon, .notice-body (.notice-title, nội dung, .notice-actions) và nút .notice-close. Mỗi mức có icon riêng (thông tin, thành công, cảnh báo tam giác, lỗi) và vạch màu bên trái, nên không chỉ dựa vào màu. Lỗi nên có role="alert", thành công role="status". Toast: .toast-host > .toast (-ok -warn -bad, mặc định là thông tin) gồm .toast-icon, .toast-body (.toast-title, .toast-text), .toast-action ("Hoàn tác") và .toast-close; nằm góc trên bên phải dưới thanh trên (điện thoại: cả chiều ngang) để không che phân trang; .empty.Tạo phiếu đầu tiên để bắt đầu theo dõi.
Icon lấy từ icons.svg: .empty-ic tự lấy màu chữ nhạt và cỡ 3rem, có hoặc không có .icon.
Quản lý chưa giao việc cho ca này.
.subtext là <details>: summary chứa .subtext-line (một dòng, cắt bằng "…" khi dài) và svg.subtext-caret, nội dung ẩn nằm trong .subtext-more. .tip là bong bóng chữ của nút .tip-btn (aria-controls, aria-describedby, aria-expanded), đặt cạnh nhãn hoặc tiêu đề trong .tip-row; mở khi rê chuột hoặc focus, bấm để giữ mở (trên điện thoại là chạm), Esc hoặc bấm ra ngoài thì đóng. Điều người dùng phải đọc mới điền được (định dạng bắt buộc, lỗi) không phải chú thích: để hiện sẵn bằng .field-hint hoặc .field-error.Nhập thông tin khách hàng mới. Thông tin này được dùng để lập phiếu bán, theo dõi công nợ và in giấy báo. Các trường có dấu * là bắt buộc.
Nhập đúng tên như trên hợp đồng hoặc hóa đơn, không viết tắt.
Gồm 10 số, bắt đầu bằng 0.
Tổng tiền khách được nợ cùng lúc. Vượt hạn mức thì phiếu bán mới cần quản lý duyệt. Để 0 nếu khách trả ngay.
Gồm 10 số, bắt đầu bằng 0.
Trái: lời giải thích hiện sẵn dưới mọi ô, màn hình dài và rối. Phải: một dòng phụ đề, giải thích đặt sau nút ⓘ; riêng định dạng số điện thoại cần để điền đúng nên vẫn hiện sẵn.
aria-label làm tên; thêm data-tooltip để hiện chính chữ đó (hoặc chữ trong data-tooltip="…", ví dụ kèm phím tắt). Tenant giữ một .tooltip[popover="manual"] có aria-hidden="true" (tên đã nằm ở nút, trình đọc màn hình không đọc hai lần), hiện nó phía trên nút hoặc phía dưới khi hết chỗ, đóng khi chuột rời, nút mất tiêu điểm, cuộn trang hoặc nhấn Esc; chuột được phép di sang chính nó. Vì là popover nên không bị khung cuộn của bảng hay hộp thoại cắt. Là gợi ý, không phải chỗ cho thứ người dùng bắt buộc phải đọc: màn hình cảm ứng không có, nên biểu tượng khó đoán thì cần nhãn chữ. Không dùng cho nút disabled. Khác với .tip (chữ giải thích đứng cạnh nhãn hoặc tiêu đề, bấm để giữ).| Số phiếu | Khách hàng | Thao tác |
|---|---|---|
| PN-0012 | Công ty Phú Thành | |
| PN-0013 | Nguyễn Văn An |
Hàng trên: bốn nút, nút cuối có chữ riêng kèm phím tắt. Bảng dưới: nút trong hàng của bảng mở tooltip mà khung cuộn của bảng không cắt được, vì nó nằm ở lớp trên cùng của trang.
<dialog class="modal"> (-sm -lg) với .modal-head, .modal-body, .modal-foot; mở bằng showModal(), trình duyệt lo lớp phủ, khóa focus và phím Esc. Trên điện thoại nó thành tấm trượt từ dưới lên.<dialog class="drawer"> (-lg rộng 560 px, -left trượt từ trái) với .drawer-head, .drawer-body, .drawer-foot; mở bằng showModal() như hộp thoại, nên có lớp phủ, khóa focus và phím Esc, bấm nền thì đóng. Dùng cho chi tiết một bản ghi hoặc biểu mẫu lọc mà người dùng không muốn rời trang; việc cần quyết định (xác nhận hủy) vẫn là hộp thoại. Trên điện thoại nó chiếm gần hết chiều ngang và chừa một dải lớp phủ..tabs (role="tablist") > .tab (role="tab", aria-selected, .tab-count); nội dung là .tab-panel. Kiểu viên thuốc: .tabs-pill. Phím mũi tên, Home, End do tenant gắn (mẫu ở cuối trang).24 phiếu trong tháng này.
5 phiếu đang chờ người duyệt.
17 phiếu đã duyệt.
.menu là popover mở từ một nút aria-haspopup="menu" có aria-controls trỏ tới menu. Mục là .menu-item (role="menuitem"); chọn một trong nhiều là role="menuitemradio", bật tắt từng mục là role="menuitemcheckbox", cả hai dùng aria-checked và .menu-check để hiện dấu tích; nhóm có role="group" với .menu-label; đầu menu tài khoản là .menu-head chứa .avatar-label. Nút có chữ dùng data-menu-align="start" để canh mép trái. Bấm Esc hoặc ra ngoài thì đóng, mũi tên, Home, End di chuyển, focus về nút khi đóng. Danh sách chọn có tìm kiếm ở mục "Dropdown có tìm kiếm"..search-btn (có .search-btn-text và kbd.kbd gợi ý phím) mở dialog.modal.modal-search: .search-box chứa input.search-input[role="combobox"], .search-results[role="listbox"] gồm các .search-group và .search-item[role="option"] (.search-item-icon, -title, -sub, -meta), .search-empty và .search-foot. Dưới 40rem hoặc với .search-btn-compact nút chỉ còn icon, chữ vẫn nằm trong trang cho trình đọc màn hình. Trên .topbar nút tự đổi sang màu header. Tenant tự lấy kết quả (gọi API, nhóm theo loại), đặt data-active khi bấm ↑ ↓ và mở mục khi bấm Enter; gallery chỉ lọc vài mục mẫu, không cần gõ dấu.nav.toc[aria-label] > ul > li > a; phần đang xem có aria-current="location" (đậm, vạch bên trái đổi màu chính, không chỉ đổi màu). Một danh sách đặt sau liên kết là mục con. .toc-label là tiêu đề nhóm (chữ, không phải liên kết) và có danh sách riêng. Không thêm class thì mục lục giữ kiểu mặc định này (vạch trái); các ví dụ dưới đây dùng kiểu Vibe. Dùng cho trang dài có nhiều phần: cài đặt, hướng dẫn, biểu mẫu chia mục. Giữ nó trong tầm nhìn bằng position: sticky ở phần bọc, và chuyển dấu khi cuộn; cột bên phải của chính trang này là mục lục dựng từ component này (từ 90rem trở lên nó nằm bên phải; hẹp hơn nó gập thành "Trên trang này" ở đầu trang). Trang ngắn hoặc đã có thẻ chuyển (.tabs) thì không cần.Kiểu Vibe: .toc-pill (bỏ vạch trái, mục đang xem là viên xám đậm chữ), .toc-card + .toc-title (thẻ có tiêu đề), details.toc-float (thu thành nút icon, mở ra bên dưới). Mục con là một danh sách đặt sau liên kết. Cột phải của gallery là chính thẻ này, kèm mục con. Cột trái là thanh bên của kit: mỗi nhóm một details.side-group, mỗi phần một mục con.
.container: .stack (các khối xếp dọc, --stack-gap) > nav.crumbs[aria-label] > ol > li (trang hiện tại aria-current="page"), rồi header.page-head gồm khối tiêu đề (h1, .page-lead mô tả, .page-meta một dòng nhãn và dữ kiện) và .page-actions ở bên phải (rơi xuống dưới tiêu đề khi hẹp), rồi .page-cols > .page-main + .page-side (thêm .stack khi có nhiều thẻ). Hai cột nằm cạnh nhau khi cột chính còn ít nhất --main-min (36rem) và cột phụ rộng --side-w (20rem), tính theo chỗ trang có nên chạy được cả khi có thanh bên; không đủ chỗ thì cột phụ xuống dưới cột chính, rộng hết hàng. Cột phụ giữ trong tầm nhìn khi cuộn (cửa sổ cao từ 40rem), bên dưới --sticky-top (chiều cao thanh trên và một khoảng); nên để cột phụ ngắn hơn cột chính, và đặt nút chính của trang ở đó. --container-w đổi bề rộng tối đa của .container (72rem). Đổi cửa sổ hẹp dưới khoảng 60rem để xem cột phụ xuống dưới. Hàng đợi hai cột đều nhau dùng .page-cols.page-cols-even (xem ví dụ thứ hai).Đường D3 nối dài – gói thầu XL-02 · Cống hộp K0+350
Gửi duyệt lại
Sai số KL D22: Không đạt → Đạt
Lý do: thử lại theo TCVN 1651: mẫu 2, 3 rớt thật
Gửi duyệt lần 1
Cột bên phải giữ nút phát hành trong tầm nhìn khi cuộn qua các thẻ dài như thế này.
Khung này lấy chỗ của riêng nó: cửa sổ rộng thì hai cột, hẹp thì cột phải xuống dưới. Cuộn trang để thấy cột phải đi theo.
TH-D3-14 · Cát vàng
TH-D3-16 · Đá 1×2
XM-D3-02 · Xi măng, đủ 28 ngày vào mai
TH-D3-15 · Thép tròn trơn
TH-D3-12 · Bê tông M300
TH-D3-11 · Gạch
Không có kết quả không đạt.
.page-cols.page-cols-even > hai (hoặc ba) khối con, mỗi khối thường là .stack của vài thẻ: các cột rộng bằng nhau khi mỗi cột còn ít nhất --col-min (28rem), không đủ chỗ thì xếp dọc. Không có cột dính.
nav.pager với aria-label: nút trước và sau (.btn-icon.btn-sm, aria-label), .pager-pages chứa các nút số (trang hiện tại aria-current="page") và .pager-gap cho dấu "…", .pager-status ("Trang 3 / 12") thay các nút số khi màn dưới 40rem hoặc khi thêm .pager-compact. .pager-center canh giữa khi đứng riêng; trong bảng, .pager-size và .pager-range nằm bên trái. Dãy số luôn đủ 7 chỗ (1 … 4 5 6 … 12) nên thanh không nhảy khi đổi trang; tenant tính dãy này, hàm mẫu ở cuối trang. Thu nhỏ cửa sổ dưới 40rem để xem hai kiểu đầu thu về "Trang x / y"..app-shell > .sidebar + .app-main. Mục là .side-item (aria-current="page", .side-label, .side-badge), nhóm có .side-heading, nhóm gập được (kiểu cây của Vibe) là details.side-group > summary.side-item (icon, .side-label, .side-group-caret) + .side-sub chứa các .side-item chỉ có chữ, chân thanh bên là .sidebar-foot. data-collapsed="true" thu về icon. Dưới 48rem thanh bên trượt ra trên trang (data-open="true" và .sidebar-scrim). Khung dưới đây thu nhỏ trình duyệt để xem cả hai..side-badge (xám) và -ok -warn -bad -info -primary, cùng cặp màu với .tag. Màu chỉ nói thêm mức độ; con số vẫn là nội dung chính, và khi màu có ý nghĩa thì ghi thêm chữ trong .visually-hidden (ví dụ " quá hạn"). Tenant giới hạn con số ("99+"). Khi thanh bên thu về icon, huy hiệu bị ẩn như trước..brand, hoặc một img.brand-logo đứng một mình (file đã có tên khách trong đó, logo dài; alt là tên khách), hoặc một img[alt=""] trong .brand-mark (file vuông hoặc chỉ có biểu tượng) kèm tên bằng chữ bên cạnh. Chiều cao cố định (--logo-h, 2.25rem), chiều rộng theo file đến giới hạn --logo-w (11rem), không cắt và không kéo giãn. .brand-logo-lg cho trang đăng nhập. Logo vẽ cho nền sáng mà đặt trên thanh tối thì thêm .brand-logo-plate (nền đệm màu bề mặt). Thanh bên thu gọn: logo dài được nhìn qua khung vuông ở đầu trái, nơi thường có biểu tượng; file chỉ có chữ thì dùng kiểu logo vuông cạnh tên. Chưa có file hoặc file lỗi thì tenant hiện .brand-mark chữ viết tắt. Ảnh mẫu trong samples/ là thương hiệu giả "Nam Việt" của bộ kit.
Thương hiệu hai dòng (.brand-text > .brand-name + .brand-sub, dòng dưới cắt bằng dấu … khi dài), số đếm là .side-badge trong .nav-item, tài khoản là .btn chứa .avatar-label (mở một .menu). Nút chính .btn-primary giữ màu nền trên thanh trên.
Thêm .topbar-dense vào thanh trên khi vai có nhiều mục (từ sáu mục trở lên): dòng dưới của thương hiệu mất, tài khoản chỉ còn avatar (chữ vẫn cho trình đọc màn hình). Không cần thêm gì ở cửa sổ dưới 89rem (1424px): thanh tự thu gọn như vậy. Hẹp hơn nữa thì thanh xuống hai hàng.
Trái: logo chữ đen mất hút trên nền tối. Phải: thêm .brand-logo-plate.
Mở rộng, thu gọn với logo dài (chỉ thấy đầu trái), thu gọn với logo vuông. Thu gọn chỉ thấy trên màn rộng; trên điện thoại thanh bên luôn mở đủ.
Đăng nhập để tiếp tục
main.login căn giữa cả hai chiều một .panel.login-card (rộng --login-w, mặc định 25rem) và một dòng .caption nhỏ bên dưới; --login-h là chiều cao trang (mặc định cả cửa sổ). Trong thẻ: .panel-body chứa .login-brand (một .brand, logo khách hoặc chữ), một div có h1 và .page-lead, rồi biểu mẫu .stack kết thúc bằng .btn.btn-primary.btn-lg.btn-block; .panel-foot chứa dòng trợ giúp. Màn chia đôi (một khung tối bên trái, biểu mẫu bên phải) là main.login-split > .login-aside + .login: khung trái chứa .brand, một div có h1 và p, hình vẽ svg.login-art (tô bằng màu của tenant, hoặc currentColor) và .login-facts (các cặp strong + chữ); thẻ bên phải phẳng, không viền. Ô mật khẩu có nút Hiện/Ẩn nằm trong ô là .input-action > .input + .btn.btn-ghost.btn-sm[data-reveal] (ô chừa --action-w, 5rem; tenant đổi type, chữ, aria-label và icon eye / eye-slash như script của trang này). Khung tối đổi bằng --aside-bg, --aside-fg, --aside-muted. Dưới 60rem khung trái thành dải phía trên biểu mẫu, bỏ hình vẽ và các cặp thông tin. Hình vẽ là của tenant: kit chỉ cho chỗ đặt.Dùng email và mật khẩu Quản trị đã cấp cho bạn.
Quên mật khẩu? Nhờ Quản trị đặt lại mật khẩu tạm.
LAS-XD 1222 · ISO 9001:2015 · TP. Hồ Chí Minh
Ghi mẫu nhận về, nhập số đo thô, xem kết quả tự tính và phát hành phiếu có số.
Dùng email và mật khẩu Quản trị đã cấp cho bạn.
Quên mật khẩu? Nhờ Quản trị đặt lại mật khẩu tạm.
.login-split làm cả trang (cao --login-h, ở đây 32rem); trên trang thật nó nằm trong main và cao cả cửa sổ. Thu hẹp cửa sổ dưới 60rem để xem khung trái thành dải trên.
Dùng tài khoản nhân viên đã được cấp.
svg.login-art là phần tử đầu của .panel-body, đứng trên .login-brand: nằm trong luồng, rộng --login-art-w (4rem), cùng mép với thương hiệu và mang màu chính (svg dùng currentColor). Hình chỉ để trang trí nên có aria-hidden="true".
.has-tabbar hoặc .has-action-bar vào trang để dòng cuối không bị thanh che. Toast ở đáy (.toast-host-bottom) tự nâng lên trên thanh.Trang chính: .tabbar với mục hiện tại aria-current="page", icon -fill và số đếm .side-badge; toast hiện ngay trên thanh.
.side-badge nằm trong dòng chữ vẫn giữ dạng viên thuốc; thêm chữ ẩn để đọc được ý nghĩa của số.
Đánh giá 9 chưa duyệt · Chấm công 1 chờ duyệt
.fab là nút tròn 56px cho đúng một việc chính của trang có thanh tab, nằm trên thanh tab ở mép cuối; .fab-ext thêm chữ cạnh icon; không dùng cùng trang có .action-bar. <dialog class="modal modal-sheet"> mở bằng showModal() trượt từ đáy ở mọi bề ngang (giữa màn hình, rộng tối đa 32rem), có vạch ở đầu chỉ để báo đây là tấm trượt: đóng bằng nút đóng, bấm nền hoặc Esc, chưa có kéo xuống để đóng. Hộp thoại thường trên điện thoại cũng có đầu bo tròn và bóng hướng lên. Danh sách chọn trong tấm: .sheet-list > .sheet-item với .sheet-ic (đĩa icon), .sheet-item-danger cho thao tác xóa..fab.fab-ext nằm trên thanh tab. Bản chỉ có icon là .fab không kèm chữ, cần aria-label.
.modal.modal-sheet trong khung điện thoại (bản tĩnh để xem). Nút bên dưới mở bản thật.
.week là bảy nút chọn ngày (aria-pressed cho ngày đang chọn, aria-current="date" cho hôm nay, data-busy khi ngày có việc); tên đầy đủ, "hôm nay" và số việc nằm trong aria-label của từng nút. .project là thẻ dự án mang màu thương hiệu, hoa văn gợn sóng do chính thẻ vẽ; chữ và nhãn đảo màu đều dùng --on-primary, nên độ tương phản là cặp mà bộ kiểm màu đã chứng minh cho nút chính. Chồng avatar dùng .avatar-group của kit, đặt --avatar-ring bằng màu nền sau nó. .switch to hơn, kèm .switch-ui cho nơi giữ trạng thái bằng ARIA (mục menu menuitemcheckbox). .setting-list gồm các hàng .setting: liên kết, nhãn bọc công tắc, hoặc nút nguy hiểm. .notif là một thông báo; chưa đọc có data-unread, chấm và chữ ẩn "Chưa đọc". .onboard và .dots cho màn chào mừng; .otp cho mã dùng một lần (tenant lo việc nhảy ô, Backspace và dán)..week, .project (có .avatar-group bên trong) và dòng việc.
Xem ca của bạn, chụp ảnh minh chứng và báo xong ngay trên điện thoại.
.onboard, .dots và nút chính cỡ lớn.