Component / 044 / NEXOFRAME

DescriptionList

Mẫu chuẩn

Danh sách cặp nhãn–giá trị, render bằng <dl>/<dt>/<dd>. Dùng khi người dùng cần đọc nhanh vài sự thật về một đối tượng trước khi quyết định: người chuẩn bị, người nhận, kênh thực hiện, nơi đăng.

Không Radix2 layoutdivided tuỳ chọnKhông tương tác

Playground

Đổi brand, theme, layout và đường kẻ giữa các mục để xem cùng một DescriptionList thích ứng.

Người chuẩn bị: Mai — Human AI Chăm sóc khách hàng
Người nhận: 128 khách hàng trong danh sách VIP
Kênh thực hiện: Zalo OA — Cửa hàng Mộc Tâm An
Nơi đăng: Chưa kết nối

layout="stacked": nhãn trên giá trị dưới.

import { DescriptionList } from "@nexobox/ui";

<DescriptionList
  layout="stacked"
  divided
  items={[
    { term: "Người chuẩn bị", detail: "Mai — Human AI Chăm sóc khách hàng" },
    { term: "Người nhận", detail: "128 khách hàng trong danh sách VIP" },
  ]}
/>

Khi nào sử dụng

Nên dùng

Vài cặp nhãn–giá trị, thường từ 2 đến 6 cặp, mô tả một đối tượng: thông tin của một đề xuất, một nhân sự hay một kênh. Người đọc quét nhãn để tìm giá trị.

Khi nào không dùng

Tránh dùng

Không dùng cho	Dùng thay
Dữ liệu nhiều hàng có thể sắp xếp hoặc so sánh	Table
Một giá trị kèm nhãn trong biểu mẫu	Field
Một con số nổi bật	StatCard (tầng 2, GĐ 2 của kit NexoCrew)
Danh sách không có nhãn	`<ul>` thường

Anatomy

<dl> là vùng chứa. Mỗi mục là một cặp <dt> (nhãn, kiểu caption, màu text-muted) và <dd> (giá trị, kiểu ui, màu text-primary). Giữa các mục có một đường kẻ border-divider khi divided bật. Giá trị có thể chứa node React, ví dụ ChannelMark kèm tên kênh.

Variants

STACKED

Người chuẩn bị: Mai — Human AI Chăm sóc khách hàng
Người nhận: 128 khách hàng trong danh sách VIP

Mặc định. Nhãn nằm trên giá trị. Hợp với panel hẹp và thẻ.

INLINE

Người chuẩn bị: Mai — Human AI Chăm sóc khách hàng
Người nhận: 128 khách hàng trong danh sách VIP

Nhãn trái, giá trị phải. Cột nhãn tự co theo nhãn dài nhất. Dưới breakpoint small tự chuyển sang stacked.

States

Một trạng thái hiển thị duy nhất. Không nhận tương tác, không hover, không focus. Giá trị trống được caller truyền bằng chữ ("Chưa kết nối"), không để ô rỗng.

Bàn phím & trợ năng

Không nhận tiêu điểm. Trình đọc màn hình đọc cấu trúc <dl> theo ngữ nghĩa có sẵn: "danh sách mô tả, n mục".

Phần tử tương tác đặt bên trong một <dd> (ví dụ một liên kết) nhận tiêu điểm như bình thường.

API & triển khai

Prop	Mặc định	Quy ước
items	—	Bắt buộc. ReadonlyArray<{ term: ReactNode; detail: ReactNode; key?: string }>. Thứ tự hiển thị là thứ tự mảng.
layout	"stacked"	"stacked" \| "inline".
divided	false	Kẻ border-divider giữa các mục.

Mọi thuộc tính <dl> còn lại được truyền thẳng. className được nối.

Design tokens

--nf-semantic-text-muted (nhãn), --nf-semantic-text-primary (giá trị), --nf-semantic-border-divider (đường kẻ, token mới của K1.1), --nf-foundation-typography-caption-* (nhãn), --nf-foundation-typography-ui-* (giá trị), --nf-foundation-space-1 (khoảng nhãn–giá trị khi stacked), --nf-foundation-space-3 (khoảng giữa các mục), --nf-foundation-space-4 (khoảng cột khi inline).

Do / Don't

Nên dùng

Nhãn ngắn, danh từ: "Người nhận". Truyền chữ cho giá trị trống: "Chưa kết nối". Dùng divided khi có từ 4 mục trở lên. Để inline tự chuyển sang stacked trên mobile.

Tránh dùng

Nhãn là câu hỏi: "Ai sẽ nhận tin này?". Để <dd> rỗng hoặc gạch ngang không có nghĩa. Kẻ viền quanh từng mục như một bảng. Ép inline bằng className trên màn hẹp rồi để giá trị bị cắt.