Yugen UI

DescriptionList

DescriptionList hiển thị các cặp nhãn / giá trị: chi tiết đơn hàng, hồ sơ, tóm tắt cài đặt.

DescriptionList là một <dl>; mỗi DescriptionItem gồm <dt> và <dd>. columns là số cột tối đa: khung hẹp tự bớt cột mà không cần breakpoint. layout inline đặt nhãn và giá trị cùng hàng; valueAlign end đẩy giá trị về cuối hàng cho bảng tổng tiền. copyable thêm nút sao chép giá trị, trình đọc màn hình đọc kèm nhãn của mục.
Mã đơn
DH-2041
Ngày đặt
27/10/2026, 09:10
Khách hàng
Trần Thị Bình
Email
binh.tran@example.com
Địa chỉ giao hàng
12 Nguyễn Trãi, phường Bến Thành, TP. Hồ Chí Minh

Import

Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.

TSX
// npm install yugen-uiimport { DescriptionList, DescriptionItem } from "yugen-ui";

Biến thể

Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.

Họ tên
Lê Hoàng Cường
Vai trò
Quản trị viên
Múi giờ
(UTC+07:00) Bangkok, Hà Nội, Jakarta
Khoá API
yg_live_51Hc…9QeD

Inline & divided

Nhãn và giá trị cùng hàng, có đường kẻ giữa các mục — hợp với trang hồ sơ, cài đặt.

Tạm tính
1.240,00 US$
Phí giao hàng
Miễn phí
Giảm giá
−124,00 US$
Tổng cộng
1.116,00 US$

Tổng tiền

valueAlign end đẩy giá trị về cuối hàng; mục cuối đậm hơn bằng className.

Cách dùng

Nên
  • Viết nhãn ngắn, viết hoa chữ đầu câu, không dấu hai chấm.
  • Bật copyable cho giá trị người dùng hay chép: mã đơn, email, mã API.
  • Dùng fullWidth cho giá trị dài (địa chỉ, ghi chú) khi có nhiều cột.
Không nên
  • Không dùng DescriptionList cho dữ liệu nhiều hàng cùng cột — dùng Table.
  • Không để giá trị trống; ghi “Chưa có” hoặc một dấu gạch có giải thích.

Props

Prop · KiểuMặc địnhMô tả
columns1 | 2 | 3 | 4Mặc định: 1Số cột tối đa; khung hẹp tự bớt cột.
layout"stacked" | "inline"Mặc định: "stacked"Nhãn trên giá trị, hoặc cùng hàng.
dividedbooleanMặc định: falseĐường kẻ trên mỗi mục.
valueAlign"start" | "end"Mặc định: "start"end: giá trị ở cuối hàng (layout inline).
DescriptionItem.labelReactNodeMặc định: —Nhãn (<dt>).
DescriptionItem.childrenReactNodeMặc định: —Giá trị (<dd>).
DescriptionItem.copyableboolean | stringMặc định: —Nút sao chép: true chép chữ đang hiển thị, chuỗi = chép đúng chuỗi đó.
DescriptionItem.fullWidthbooleanMặc định: —Chiếm cả hàng khi có nhiều cột.

Messages

Chữ có sẵn của component: nhãn, aria-label, thông báo cho trình đọc màn hình.

Mặc định là tiếng Anh. Đổi qua prop messages của YugenProvider, theo namespace bên dưới; messagesVi chứa bản tiếng Việt. Xem Ngôn ngữ giao diện.

messages.descriptionList

Khoá · KiểuMặc định (tiếng Anh)messagesVi
copystring

Tên nút sao chép; trình đọc màn hình đọc kèm nhãn của mục ("Sao chép Mã đơn").

Mặc định (tiếng Anh)"Copy"messagesVi"Sao chép"
copiedstring

Đọc qua vùng status sau khi sao chép.

Mặc định (tiếng Anh)"Copied to clipboard"messagesVi"Đã sao chép vào bộ nhớ tạm"