Tokens

Màu nền, chữ, trạng thái.

Icon

Cỡ chạm: --tap và data-tap

Button

Nút có biểu tượng

Form

Cột có độ rộng khác nhau

.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.

Số trong khoảng ngắn

.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.

Dropdown with search

Ô chọn hai dòng, nhóm và dòng thêm mới

Hai dòng, đã chọn một khách

Ô đóng hiện tên và dòng phụ. Bấm hoặc gõ thì ô trở về một dòng chữ để lọc (gõ “0905” hay “nam viet” đều khớp); dòng quá dài bị cắt bằng “…” (xem ô hẹp bên dưới).

Tên dài trong ô hẹp

Ô nhập số: tiền và số lượng

Ô thường

Thử: gõ 1250000, đặt con trỏ giữa số rồi gõ hoặc xóa, dùng Backspace và Delete cạnh dấu chấm, dán "1.250.000 đ" hay chữ lẫn số.

Ô lớn có đơn vị, số bằng chữ và nút nhanh

.input-lg trong .input-affix với data-words và .money-keys (cùng .field nên không cần data-money-keys). Bấm nút, tiêu điểm vẫn ở trong ô.

Ô báo lỗi

Ô bị khóa

Ô số lượng thập phân

Ô thường và ô lớn có đơn vị

Thử: gõ 4.162 (hiện 4,162), 12,50 rồi rời ô (vẫn 12,50), 007 (thành 7), ",5" (thành 0,5), thêm số lẻ thứ tư (bị từ chối), dán "3,25 kg".

Báo vượt số chữ số lẻ

Trạng thái ngay sau khi chữ số thứ tư sau dấu phẩy bị từ chối: ô giữ "4,162", aria-invalid và lời báo hiện ra, mất đi khi sửa hợp lệ hoặc rời ô. Với data-allow-negative thì cho phép dấu trừ đứng đầu.

Nút tăng giảm số thập phân, 0 đến 12, bước 0,5

.number-stepper[data-decimals="1" data-step-by="0,5"]: ↑ ↓ và hai nút bước 0,5; gõ "3.5" hay "3,5" đều được và hiện "3,5". Hai ô nguyên ở mục "Nhập liệu" (số ảnh tối thiểu, số người) không đổi.

Date picker, range và điều hướng kỳ

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ờ trong ngày

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.

Tháng

.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.

Điều hướng kỳ: ngày, tháng, quý, năm

Tháng, chặn hai đầu

Sổ bắt đầu từ 04/2026 và có số liệu đến 09/2026 (data-min="2026-04", data-max="2026-09"): ở tháng đầu nút lùi mờ, ở tháng cuối nút tiến mờ, cả hai vẫn nhận phím Tab. Bấm thử để đổi kỳ.

Quý

Năm

Ngày, không mở ngày tương lai

Sổ công việc bắt đầu từ 01/04/2026 và không mở ngày chưa tới (data-max="today"). Ví dụ thứ ba để trống data-value, nên mở ở hôm nay: nhãn có thẻ “Hôm nay”, nút tiến mờ. Nhãn dài nhất (“Chủ Nhật, 30/08/2026”) vẫn nằm trong một dòng ở khổ 390 px.

Đặt từ script và ngày giả cho mockup

TvKit.periodNav.set(el, value, { unit }) đặt kỳ từ script: value là yyyy-mm-dd, yyyy-mm, yyyy-Qn, yyyy hoặc "today" (làm tròn về kỳ, bị chặn bởi min/max); bỏ trống thì giữ kỳ đang xem. { unit } đổi đơn vị (nhãn nút trước/sau do kit viết đổi theo). Hàm không bắn change: người gọi đã biết; đọc data-value khi cần. data-today="2026-09-30" trên khung cố định hôm nay cho mockup: data-max="today", thẻ “Hôm nay” và nút “Hôm nay” đều theo ngày đó thay vì đồng hồ máy (data-max cũng nhận ngày yyyy-mm-dd trực tiếp). Ngày giả chỉ áp cho khung có thuộc tính, không áp cho lịch hay ô ngày.

Thanh chuyển ngày dính trên đầu

.period-nav.period-nav-sticky trong khung cuộn 15 rem (khung có tabindex="0"): thanh nằm ở đầu khung, các dòng trượt dưới nền --surface, có nút “Hôm nay” (.period-nav-today) vì ngày đang xem không phải hôm nay. Bấm “Hôm nay” thì nút ẩn đi, thẻ “Hôm nay” hiện ra và tiêu điểm chuyển sang nút lùi.

Cùng thanh ở ngày hôm nay: thẻ “Hôm nay” trong nhãn, không có nút “Hôm nay”, nút tiến mờ.

Bộ chọn quý

.datepicker[data-quarterpicker] do kit.js điều khiển, theo mẫu bộ chọn tháng: gõ Q3/2026, 3/2026, q3-2026 hoặc Quý 3/2026, hoặc bấm nút để chọn trong bốn quý. Giá trị ở data-value dạng 2026-Q3; data-min, data-max cùng dạng (ô thứ hai chỉ nhận năm 2026). Ô bắn input và change. Trong bảng chọn: ← → đổi quý, ↑ ↓ đổi hai quý, Page Up và Page Down đổi năm, Home và End về đầu và cuối năm, Enter chọn, Esc đóng.

Khoảng ngày: chọn nhanh Tuần này, Từ đầu và một mục do trang đăng ký

Ba mục chọn nhanh mới: “Tuần này” (thứ Hai đến Chủ nhật), “Từ đầu” (từ data-all-from="2026-04-01" đến hôm nay) và “Năm tài chính” (từ 01/04 đến hôm nay), do trang mẫu đăng ký bằng TvKit.presets.register('fy', 'Năm tài chính', fn); nút của nó trong mã nguồn để trống, chữ lấy từ lần đăng ký. Mục nằm ngoài data-max (31/12/2026) thì mờ và gạch ngang.

Tệp và ảnh

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.

Ô thêm ảnh và lưới tệp

Hai ảnh, ô chụp và ô chọn từ thư viện

Ô chụp (capture="environment") và ô thư viện (.thumb-add-pick) nằm cuối hàng, cùng dáng khung ảnh và thẳng hàng với ảnh. Bấm hoặc Tab tới rồi Enter/Space để mở; thử phím Tab để thấy vòng lấy nét.

Chưa có ảnh nào

Danh sách trống chỉ có ô thêm; cùng cỡ một ảnh nên chỗ của nó không đổi khi ảnh đầu tiên đến.

Cỡ nhỏ, bốn ô một hàng

Với .thumb-list-sm (5 rem) ô thêm vẫn cao hơn 44 px.

Lưới tệp: bốn loại, tên rất dài

Cả ô là đường dẫn (a.file-tile). Tên dài bị cắt ở hai dòng bằng “…” và ô cao bằng nhau trong một hàng; loại tệp là chữ ở góc.

Có nút xóa

div.file-tile với a.file-tile-name trải kín ô và button xóa nằm cuối, có tên riêng cho từng tệp (“Xóa tệp …”).

Trong khung hẹp

Khung 15 rem chỉ đủ một cột; tên vẫn hai dòng, không tràn ra ngoài.

Chọn nhanh: nút chọn một và thẻ quỹ

Loại phiếu: Chi, Thu, Chuyển

Ba mục, ba tông: data-tone="warn", "ok", "info". Mỗi mục có biểu tượng riêng; bấm hoặc dùng phím mũi tên để đổi.

Điểm danh: bốn mục trong thẻ 358 px

Bốn nhãn, dài nhất “Không phép”, nằm một dòng trong thẻ rộng 358 px đệm 12 px (điện thoại 390 px), cả ở chữ 14 px của kiểu app. Thẻ đệm 20 px chỉ còn 316 px cho nhóm: nhãn dài nhất sẽ bị cắt bằng “…”, nên giữ đệm hẹp hoặc rút nhãn. Không biểu tượng, vì nhãn đã đủ rõ.

Kết quả công việc: có biểu tượng

Biểu tượng đứng trước nhãn; mục “Đang làm” đang chọn với tông info.

Hai mục, không màu

Không có data-tone: mục chọn nổi trên nền chìm như .seg, chỉ rộng hết dòng.

Một mục bị khóa

Mục bị khóa mờ đi và phím mũi tên bỏ qua nó; lý do nằm ở dòng chữ bên dưới.

Chọn quỹ: dải cuộn, thẻ gọn, cặp Từ / Đến

Dải quỹ cuộn ngang, một quỹ âm

Bảy quỹ không vừa khung nên dải cuộn ngang, thẻ bám mép đầu khi cuộn; Techcombank là quỹ âm: thẻ nhuộm đỏ, số có dấu trừ và có nhãn “Âm”. Chọn một thẻ ở xa (hoặc bấm mũi tên, End) thì dải tự cuộn thẻ đó vào khung.

Thẻ chọn quỹ gọn

Thẻ 7,5rem, biểu tượng, tên quỹ và một dòng số dư. Tab vào nhóm, mũi tên đổi quỹ.

Thẻ có một quỹ không hợp lệ

Số tiền rút lớn hơn số dư của quỹ đã chọn: thẻ viền đỏ, biểu tượng đỏ và câu báo lỗi dưới nhóm nói rõ lý do. Bỏ aria-invalid khi người dùng đổi quỹ.

Cặp Từ / Đến có nút đổi chiều

Rộng: hai ô cạnh nhau, nút đổi chiều ngang hàng với ô. Bấm nút (hoặc Tab tới rồi Enter, Space) thì hai quỹ đổi chỗ; ở đây là hai ô chọn có tìm kiếm.

Cặp Từ / Đến trong khung hẹp

Khung dưới 28rem: hai ô xếp dọc, nút nằm giữa và mũi tên xoay thành lên xuống; đây là hai ô select thường.

Cặp thẻ chọn quỹ

Mỗi bên là một nhóm thẻ gọn (hai nhóm radio có tên khác nhau, cùng giá trị value); nút đổi chiều đổi quỹ đã chọn của hai bên.

Chip và tag

Chip: chọn một và tag lớn

Tag: nhãn trạng thái, nhãn đặc, huy hiệu tăng giảm

Chip có số đếm, hàng cuộn, chip thêm và chip đường dẫn

Bộ lọc trạng thái có số đếm

.chip-count sau nhãn; chữ ẩn “người” cho trình đọc màn hình. Bấm hoặc dùng phím mũi tên để đổi.

Hàng chip cuộn ngang một dòng

Mười chip trên một dòng trong khung 32 rem (hẹp hơn nữa ở điện thoại): cuộn ngang, thanh cuộn mảnh. Chọn chip bằng phím mũi tên thì hàng tự cuộn tới chip đó.

Chip thêm ở cuối hàng

.chip-add là nút (không phải radio) ở cuối hàng: nét đứt, dấu cộng, màu liên kết. Cuộn đến cuối hàng để thấy nó; các chip radio nằm trong .chip-group[role="radiogroup"] riêng.

Chip là đường dẫn

a.chip với biểu tượng cảnh báo và số đếm: cùng dáng với chip thường, không gạch chân, cao --tap khi chạm. Biểu tượng và chữ nói đây là việc có vấn đề, màu không đứng một mình.

Checklist: dòng việc có nút, nút tick, ảnh

Dòng việc có nút

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.

Nút tick

Chưa tích, đã tích (aria-pressed="true"), chụp ảnh (.tick-primary) và bị khóa (aria-disabled="true").

Ảnh thu nhỏ

Đã 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.

Ảnh vuốt ngang

.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.

Thẻ đóng mở

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.

KPI card và số liệu tổng quan

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.

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.

Thẻ trạng thái có nút

.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.

Con số đủ đồng, vừa thẻ

Hai thẻ cạnh nhau ở bề rộng điện thoại

Hàng 22rem (điện thoại) với .kpi-row-pair: hai thẻ vẫn ngang hàng, số vừa khít và không xuống dòng. Thiếu .kpi-row-pair thì dưới 27rem mỗi thẻ một dòng.

Hai thẻ ở bề rộng vừa và rộng

Cùng hai con số ở hàng 30rem và 44rem: càng rộng càng gần cỡ đầy đủ. Hai số dài ngắn khác nhau trong cùng hàng có cùng cỡ chữ, nên không lệch nhau.

Một thẻ lẻ, và số dài hơn mặc định

Thẻ lẻ ở điện thoại còn chỗ rộng nên giữ cỡ đầy đủ. --fit-chars:16 báo trước số dài hơn mặc định để cỡ chữ không vượt thẻ; --fit-chars:12 trên hàng đầu tiên cho số 9 chữ số to hơn mức mặc định.

Bộ rút gọn tiếng Việt, khi chỉ cần liếc

Bảng báo cáo, không phải sổ quỹ: số viết gọn bằng k (nghìn), tr (triệu), tỷ, kèm số đầy đủ cho trình đọc màn hình. Kit không tự định dạng số.

KPI: delta trung tính, thẻ nhấn mạnh, khối chờ tải

Delta tốt, xấu và trung tính

Doanh thu tăng là tốt (xanh), nợ phải trả tăng là xấu (đỏ), chi tăng thì chưa biết tốt hay xấu (xám: .delta-neutral). Mũi tên và chữ ẩn nói hướng ở cả ba.

Thẻ nhấn mạnh

Thẻ giữa là thẻ thường để so. Thẻ nhấn mạnh có thanh --primary ở đỉnh và số lớn hơn 1,25 lần; thẻ thứ ba có cả data-tone="danger" (thanh đỏ ở mép đầu, kèm chữ “Cần xem”).

Thẻ nhấn mạnh với số giữ nguyên cả số tiền (.kpi-value-fit)

Số vẫn vừa một dòng: kích thước tối đa của thẻ nhấn mạnh lớn hơn, nhưng không bao giờ rộng hơn thẻ.

Khối chờ tải: thẻ KPI và bảng

Khối trong khung thẻ KPI (ba khối cao 1, 2,25 và 1 rem) và ba khối cao 3 rem xếp như dòng bảng, khối cuối ngắn hơn (--skel-w: 70%). Nhịp nháy dừng khi người dùng chọn giảm chuyển động.

Dải tóm tắt

Thu, chi, chênh lệch (ô cuối đậm, màu theo dấu)

Ba ô một hàng ở mọi bề rộng. Chênh lệch dương dùng .num-in (xanh, có dấu “+”).

Chênh lệch âm, số dài nhất

“− 12.400.000 đ” còn nguyên một dòng trong ô khoảng 100 px ở phone nhờ cỡ chữ tự giảm. Số âm dùng .num-neg (đỏ); dấu trừ vẫn nằm trong chữ.

Đầu kỳ, vào / ra, cuối kỳ (số thường, một ô có hai số)

Số không có dấu thì không cần lớp. Ô “Vào / ra” có hai số, mỗi số không xuống dòng, hai số có thể xuống dòng ở giữa khi ô hẹp.

Bốn ô (hai nhân hai khi hẹp hơn 24rem) và hai ô

Bốn ô: một hàng khi dải rộng từ 24rem, hai nhân hai khi hẹp hơn (như ở phone).

Hai ô, tên dài xuống hai dòng, con số vẫn nằm sát đáy ô nên các số thẳng hàng.

Trong khung hẹp: 21rem còn một hàng, 15rem thành từng dòng

Khung 21rem (dải khoảng 18rem): ba ô vẫn một hàng, con số giảm tới cỡ nhỏ nhất (--fs-xs).

Khung 15rem: dải hẹp hơn 17,5rem thì ba con số không còn đủ chỗ cạnh nhau, mỗi ô thành một dòng (tên ở đầu, số ở cuối) thay vì chồng lên nhau.

Ô có tone: số liệu có ngưỡng

data-tone="ok|warn|bad" trên .stat-strip-item tô màu con số (như tone của thẻ KPI); tên ô vẫn nói nghĩa bằng chữ (Đạt, Cảnh báo, Lỗi) nên màu không đứng một mình.

Số và mã chứng từ

Trong bảng dạng thẻ (.tbl-cards, đọc được trên điện thoại): tiêu đề cột Thu và Chi nói loại phiếu, dấu +/− nằm trong số. Dòng đã hủy dùng .num-void cho từng số khi dòng không phải tr.row-void.

Trên thẻ KPI: .num-neg đi với data-tone="danger" và câu chữ nói rõ, nên màu không đứng một mình.

Mã chứng từ

Trong tiêu đề

Phiếu chi PC-2026-0412

Đơn hàng DH-2026-0087

Cỡ chữ theo tiêu đề quanh nó. .doc-code-solid cho số ở đầu phiếu, .doc-code khi mã chỉ là một phần của dòng.

Trong ô bảng

Trong dòng danh sách việc

Ở bảng thẻ (.tbl-cards) mã đứng ở ô đầu th[scope="row"]; trong dòng việc nó đứng trước tên, trên một dòng, không bị cắt.

Avatar

NANANANANANA NANAmàu, vuông, ảnh

Biểu đồ và xếp hạng

Thu và chi 12 tháng, kèm vạch cùng kỳ năm trước

Hai chuỗi, mười hai nhóm: ở khổ điện thoại biểu đồ cuộn ngang trong khung của nó (khung có tabindex="0" để cuộn bằng bàn phím), trục tung dính ở mép trái, chữ nhãn vẫn 12 px. Vạch đậm trên mỗi cột là cùng kỳ năm trước. Bảng bên dưới là nội dung thật.

Ba tháng, cột là đường dẫn

Quý 3, ba nhóm: ở khổ rộng vừa khít, ở khổ điện thoại cuộn nhẹ trong khung (có tabindex), vì mỗi cột liên kết rộng ít nhất 44 px. Mỗi cột là a.cc-col (rê chuột thì nền cột đậm lên, Tab thì có khung focus; dưới ngón tay mỗi cột rộng ít nhất 44 px). .cc-plot là role="group", mỗi liên kết có tên “Thu tháng 7: 352,4 triệu, cùng kỳ năm trước 340 triệu”.

Chưa có số liệu

Kỳ chưa có phiếu: giữ trục và chú giải, trong vùng vẽ có một câu p.cc-empty và aria-label nói rõ chưa có số liệu; bảng bên dưới cũng nói như vậy.

Một chuỗi

Một chuỗi (chi vật tư) với vạch cùng kỳ năm trước; chú giải vẫn có chữ, trục tối đa 200 triệu. Sáu nhóm vẫn có khung cuộn có tên, vì ở khổ hẹp chúng không vừa.

Bốn chuỗi: bốn kiểu tô

Cả bốn mẫu tô: đặc, sọc chéo, chấm, sọc dọc; kể cả khi in đen trắng hay với người khó phân biệt màu, chú giải và mẫu tô vẫn cho biết cột nào là chuỗi nào.

Danh sách xếp hạng có thanh

Tám khoản chi nhiều nhất, có hạng và dòng phụ

Mỗi dòng là liên kết tới các phiếu tạo ra con số (thanh là tỉ lệ so với khoản lớn nhất, 386,2 triệu). Hạng nằm trong .rank-no (aria-hidden, vì danh sách là ol).

Có liên kết và không có liên kết

Trái: a.rank-row, rê chuột hoặc Tab thì thấy nền và khung focus. Phải: div.rank-row, không có nền khi rê chuột, không có .rank-no và không có dòng phụ.

Màu thanh theo trạng thái

data-tone “ok”, “warn”, “bad” đổi màu thanh; trạng thái vẫn được nói bằng chữ trong dòng phụ (“Vượt định mức 12%”) và trong chữ ẩn của tên. Thanh “bad” đầy vì đã tới 100% bề rộng, con số ghi 112%.

Cột hẹp: thanh xuống dưới tên

Ngay trên máy tính, một cột rộng 20 rem (dưới 28 rem) đã dùng cách xếp của điện thoại: thanh nằm dưới tên, con số vẫn ở cuối dòng tên. Quy tắc theo bề rộng của danh sách, nên cột bên của một trang rộng cũng được.

Một tên rất dài

Tên dài thì xuống dòng và không đẩy con số hay thanh ra ngoài; con số luôn trên một dòng.

Thanh tỉ lệ (100 %)

Một thanh có chữ trong đoạn

58 người được đánh giá: A+ 3, A 47, B 5, C 3. .share-bar-lg cao 24px, chữ cái nằm trong đoạn (màu chữ là cặp --on-grade-n); đoạn nào hẹp hơn chữ cộng 4px mỗi bên thì kit.js ẩn chữ (ở khổ điện thoại đoạn A+ và C chỉ còn màu), tooltip và chú giải vẫn nói. Rê chuột lên một đoạn: “Trạm cấp cứu mỏ Hạ Long · C · 3 người · 5,2 %”.

Mỗi đơn vị một dòng, có dòng tổng

Thanh nằm trong td nên các thanh của một cột tự thẳng hàng; dòng tổng ở tfoot dùng .share-bar-lg. P.TCHC in ra 6,7 + 86,7 + 6,7 = 100,1 % nhưng độ rộng theo tỉ lệ thô (--v) nên vẫn đúng. Đội Vàng Danh chưa có đánh giá: .share-bar-empty với chữ, không NaN, không thanh rỗng. Trong bảng thanh mang aria-hidden="true" vì các ô đã đọc đủ số; thanh đứng riêng thì là role="img" với câu đầy đủ. Ở 390px bảng cuộn ngang trong khung của nó.

Đoạn là liên kết: tiến độ kỳ

Mỗi đoạn là a.share-seg có aria-label riêng, nên thanh là role="group"; Tab đi qua từng đoạn và khung focus hiện cùng tooltip với khi rê chuột. Màu là tone của kit (data-tone: ok, warn, info, draft có gạch chéo, muted), chữ trong đoạn là --text. Dưới ngón tay thanh có liên kết cao ít nhất 24px.

Đoạn rất nhỏ và chưa có đánh giá

Một đoạn trên 0 luôn rộng ít nhất 3px, nên 0,51 % vẫn thấy (rộng hơn tỉ lệ thật một chút, tooltip và bảng ghi đúng số). Mẫu số bằng 0: đường viền đứt và một câu, ở cả hai cỡ.

Thanh trọng số so với mốc

Trọng số 105 trên thang 105, mốc 100

Thang là 105 nên mốc 100 nằm ở --at:.952; mỗi đoạn là trọng số chia 105. TC6 có 10, nửa đầu vừa dưới mốc, nửa sau là .share-over (đỏ, gạch chéo) và không có chữ: mốc và dòng “105 % · thừa 5” bên cạnh đã nói. Chữ “TC6 10” không vừa đoạn của nó nên bị ẩn; tooltip vẫn có.

Sửa trọng số, thanh cập nhật ngay

Gõ số vào một ô: --v của từng đoạn và --at của mốc đổi theo, bề rộng trượt trong --dur-2 (không trượt khi bật giảm chuyển động); tổng trên 100 thì thang giãn ra và phần vượt hiện gạch đỏ, dưới 100 thì phần còn lại của rãnh --sunk để trống.

Cột có tương tác và cột chồng

Tooltip, dải nền khi rê, chọn một tháng, vạch ngưỡng

data-chart trên figure.chart-cols bật tooltip từng nhóm (số đọc từ data-value của mỗi cột, định dạng theo data-decimals và data-unit), dải nền --surface-hover sau nhóm đang rê, chuyển động lúc vào và, với data-select, chọn một nhóm: cột đậm hơn, nhãn đậm, aria-pressed="true" và sự kiện tvkit:chart-select (dòng ngay dưới biểu đồ in lại nó). Vùng vẽ cột thường thành một điểm dừng Tab (←/→, Home, End, Enter, Esc). div.cc-ref là vạch ngưỡng có nhãn ở mép cuối, nét đứt, không nhầm với đường kẻ. Không có data-chart thì .chart-cols giữ nguyên như phần trên.

Cột chồng, có vạch ngân sách

.cc-stacked chồng các cột của một nhóm lên nhau (cột đầu ở dưới), mỗi --v là phần của giá trị lớn nhất của trục; khe 2px giữa các khúc, chỉ khúc trên cùng bo góc, mẫu tô từng chuỗi như cột nhóm. Tooltip ghi tổng ở dòng đầu (“Tháng 7 · Tổng 309 tr”).

Biểu đồ đường

Ba đường, vạch ngưỡng, tháng thiếu, chú giải bật tắt, chọn tháng

Số lấy từ bảng ngay dưới (data-chart-table): ô trống là tháng thiếu, đường đứt ra chứ không về 0 (tháng 4 không đánh giá; tháng 10 cấp trên chưa chấm, tháng 11 và 12 chưa tới). Điểm trên 100 là bình thường, trục không cắt. Chuỗi 1 nét liền, chuỗi 2 nét gạch dài, cùng kỳ nét gạch ngắn màu --series-prev; chú giải vẽ đúng nét đó. Rê chuột: vạch dọc bám tháng gần nhất, chấm trên mọi đường, tooltip ghi số trước tên. Tab tới vùng vẽ: ←/→, Home, End, Enter chọn, Esc ẩn; vùng aria-live đọc “Tháng 7: Cấp trên 98,0 điểm; …”. Rê lên một mục chú giải thì các đường khác mờ còn 25 %, bấm thì ẩn hoặc hiện (luôn còn một đường, trục không đổi). Nút “Đổi số” sửa bảng rồi gọi TvKit.chart.render(figure): cùng tháng nên số trượt trong 350 ms. “Đang tải lại” đặt aria-busy="true": vùng vẽ mờ một nửa, khung giữ nguyên.

Một chuỗi có vùng nhạt

data-area: một lớp nhạt 10 % màu chuỗi dưới đường, chỉ khi biểu đồ có một chuỗi. Trục tự chọn bậc đẹp (1, 2, 2,5, 5 × 10ⁿ, bốn đến sáu đường) và không bắt đầu từ 0 khi số nằm sát nhau. Ở đây bảng nằm trong div.visually-hidden (đặt lớp lên chính table thì bảng không co về 1px và làm trang tràn ngang): trình đọc màn hình vẫn đọc được.

Bốn chuỗi và cùng kỳ, tên dài, một điểm đứng riêng

Bốn chuỗi cùng năm, cùng thang điểm nên cùng là nét liền, phân biệt bằng màu, chú giải (rê chuột vào một mục làm mờ các đường khác), tooltip và điểm cuối; chỉ cùng kỳ năm trước là nét gạch ngắn vì là hệ quy chiếu khác. Trạm Cẩm Phả có số tháng 6 đứng riêng (tháng 5 và 7 trống): điểm không có hàng xóm luôn có chấm. Mười hai tháng ở 390px: nhãn tháng thưa ra (cách một, cách hai), tháng đầu và tháng cuối luôn hiện; cao 12,5rem khi biểu đồ hẹp hơn 40rem.

Chưa có số liệu

Không có số nào: một câu p.chart-empty trong vùng vẽ (chữ của data-empty), không vẽ trục.

Biểu đồ tròn rỗng (donut)

Bốn phần, có tổng ở giữa, chọn một phần

Vòng dày 22 % bán kính, khe 2px giữa các phần, màu theo thứ tự chuỗi của bảng (không sắp lại theo độ lớn). Chú giải dưới vòng: mỗi phần một cột, ô màu, tên, tỉ lệ chữ lớn; bốn phần không đủ chỗ thì xếp 2 × 2, không bao giờ 3 + 1. Rê hoặc Tab tới vòng rồi ←/→: phần đó nhô ra 4px và tooltip ghi số trước, tỉ lệ sau; Enter (hoặc bấm) giữ nó nhô ra và gửi tvkit:chart-select.

Trạng thái phiếu, màu theo tone, bảng xếp dọc

Bảng một cột số, mỗi dòng một phần (kit.js nhận ra cả hai chiều); data-tone trên ô đầu dòng (th) chọn màu tone thay cho màu chuỗi. Tone là màu nhạt: chữ, chú giải và bảng mang số, khe 2px tách các phần. Phần “Nháp” chỉ 0,5 % nên mỏng như một vạch, tooltip vẫn đọc được.

Tám khoản: danh sách bên cạnh vòng, “Khác” mở ra được

Hơn năm phần thì bốn phần đầu giữ nguyên, phần còn lại gộp vào “Khác” (màu --series-prev). Từ năm phần chú giải là danh sách dọc (ô màu, tên, giá trị, tỉ lệ canh phải), nằm cạnh vòng khi hình rộng từ 34rem, dưới vòng trên điện thoại; bấm dòng “Khác” để xem từng khoản đã gộp với số của nó. Không dùng carousel: chú giải phải thấy hết một lần. Donut cho 2 đến 5 phần của một tổng; so các phần giữa nhiều dòng thì dùng thanh tỉ lệ.

Chưa có số liệu

Tổng bằng 0: vòng xám --sunk và một câu ở giữa, không có chú giải.

Sparkline

Trong thẻ KPI

Đường 2px theo tông của thẻ (--primary, hoặc màu data-tone của .kpi: thẻ giữa là warn); các tháng trước nhạt hơn, đoạn cuối và điểm cuối đậm. Rê chuột hoặc chạm: một chấm chạy theo tháng gần nhất và tooltip nói tháng (data-labels) và giá trị. Thẻ đầu đặt sparkline ngay sau con số, hai thẻ sau đặt trong .kpi-foot (sparkline lên trước chữ). Thẻ thứ ba thiếu tháng 3 (“-”): hai bên nối bằng nét chấm mờ. Nghĩa của hình nằm ở chữ trong thẻ và một câu .visually-hidden do tác giả viết.

Trong ô bảng

Trong ô bảng sparkline rộng bằng ô (ít nhất 4rem), cao --spark-h (2rem); câu ẩn trong ô nói xu hướng.

Bảng tô màu theo giá trị

Mỗi cột một thang (mặc định)

Nhỏ nhấtLớn nhất, trong từng cột

table.tbl[data-heat]: mỗi cột so với chính nó, nên Thu và Chi cùng có tháng đậm nhất (T12) dù số khác nhau. Dòng tổng ở tfoot không tô. Ô đậm nhất vẫn đủ tương phản cho chữ (đã kiểm trên 7 bảng màu).

Một thang cho cả bảng

data-heat="table": mọi ô so với nhau, nên cột Thu đậm hơn hẳn cột Chi. data-heat="row" so trong từng dòng; th[data-heat="off"] bỏ một cột ra.

Có cả số âm và số dương

Âm nhiềuDương nhiều

Khi một thang có cả số âm và số dương, 0 là điểm giữa (nền trắng): số dương đậm dần màu xanh, số âm đậm dần màu đỏ, hai phía chung một độ dài nên −12,8 và 12,8 đậm như nhau. Dấu trừ vẫn nằm trong số. Tự bật, không cần thuộc tính; data-heat-mid="off" giữ thang nhạt đến đậm.

Tông khác

Đặt --heat-strong trên bảng để đổi tông (ở đây là ok); giữ mức pha để chữ vẫn đọc được.

Dải tóm tắt có liên kết và chênh lệch

Sáu ô là liên kết, có chênh lệch

Cả ô là vùng bấm (liên kết nằm trong dt và phủ cả ô, vì dl chỉ chứa div > dt + dd): rê chuột thì nền --surface-hover, Tab thì khung focus nằm trong ô, mũi tên ở mép cuối màu --muted, chữ vẫn là màu chữ. Dòng chênh lệch có mũi tên, số có dấu và kỳ so sánh; xanh khi đi đúng chiều tốt (data-good), đỏ khi ngược, xám khi không đổi. “Chờ đánh giá −12” là tốt nên xanh; “Đã giao +1” là xấu nên đỏ.

Năm ô

Năm và sáu ô nằm một hàng khi đủ chỗ; dải hẹp hơn 40rem (điện thoại) thì xuống ba ô một hàng: sáu thành 3 + 3, năm thành 3 + 2.

Bảng cơ bản

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.

Tiêu đề cột dài

.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.

Trạng thái dòng: ngừng dùng, đã hủy, tô theo tone, vừa thêm

Bảng: từng trạng thái

Từ trên xuống: bình thường, row-void, row-off, bốn tone ok warn bad info, row-new, aria-selected. Dòng cuối đang chọn có cùng nền với dòng mới nhưng không có vạch.

Danh sách: đã hủy, ngừng dùng, vừa thêm

Dòng 2 .row-off, dòng 3 .work-row[data-state="void"], dòng 4 .row-void kèm data-tone="warn" (vạch bị bỏ), dòng 5 .row-new.

Khung hẹp: bảng thành thẻ

Thẻ tô warn, thẻ row-off, thẻ row-void, thẻ row-new (có vạch ở mép trái), thẻ tô bad.

Dòng số dư đầu kỳ

Sổ quỹ có dòng đầu kỳ và dòng tổng

Dòng đầu kỳ: th[colspan="4"] cho nhãn, số dư ở cột cuối. Dòng cuối là tfoot (tổng phát sinh và số dư cuối kỳ).

Khung hẹp: thẻ

Cùng bảng ở khung dưới 36rem: thẻ đầu kỳ nhạt, tiêu đề là nhãn, chỉ có ô số dư (ô trống được bỏ); tfoot thành thẻ cuối có viền đậm, các ô số của nó cần data-label như ô thường.

Bảng dính đầu, cuộn

.tbl-sticky trong .tbl-scroll: đầu bảng và dòng tổng dính, dòng đầu kỳ cuộn dưới đầu bảng như mọi dòng. Cuộn bảng để thấy đầu bảng ở trên dòng đầu kỳ.

Cột đầu dính, các ô trống giữ nguyên

Trong bảng .tbl-sticky-col không dùng colspan: nhãn ở ô đầu, các ô khác của dòng đầu kỳ để trống.

Bảng nâng cao