ComponentHiển thị dữ liệu
Bắt đầu nhanh
Import List từ entry công khai. Các ví dụ bên dưới thể hiện những kiểu tương tác và cấu hình được hỗ trợ.
component.tsxtsx
import { List } from '@underverse-ui/underverse';Ví dụ tương tác
Dùng thử List thật, xem mã ví dụ và tra cứu các prop đã được mô tả.
Đang tải ví dụ tương tác…
Tham chiếu
Tham chiếu API
Tra cứu các thuộc tính, kiểu dữ liệu được chấp nhận, giá trị mặc định và lưu ý về hành vi.
Dữ liệu được sinh từ API TypeScript công khai của thư viện. Kiểu dữ liệu, thuộc tính bắt buộc và giá trị mặc định luôn đồng bộ với mã nguồn.
List
Component| Thuộc tính | Mô tả | Kiểu | Mặc định |
|---|---|---|---|
as | Thẻ element để render (ul/ol/div). | "ul" | "ol" | "div" | — |
ordered | Dùng danh sách có thứ tự (ol). | boolean | — |
variant | Biến thể hiển thị (plain, outlined, soft). | Variant | — |
size | Kích thước item. | Size | — |
divided | Thêm đường phân cách giữa các item. | boolean | — |
inset | Thêm padding bên trong quanh item. | boolean | — |
hoverable | Hiệu ứng hover cho item. | boolean | — |
loading | Show loading skeleton | boolean | — |
loadingCount | Number of skeleton items to show | number | — |
emptyText | Show empty state when no children | string | — |
dense | Make items more compact | boolean | — |
itemClassName | Class name customization for all list items | string | — |
overflowHidden | Clip overflow on the outer list wrapper. Mainly relevant for striped/card-like variants. | boolean | — |
ListItem
Component| Thuộc tính | Mô tả | Kiểu | Mặc định |
|---|---|---|---|
as | Element render cho item (li/div/a/button). | "li" | "div" | "a" | "button" | "li" |
selected | Đánh dấu được chọn. | boolean | false |
disabled | Vô hiệu hoá tương tác. | boolean | false |
href | Đường dẫn (render thẻ a). | string | — |
label | Tiêu đề/chuỗi chính. | React.ReactNode | — |
description | Mô tả phụ phía dưới. | React.ReactNode | — |
leftIcon | Icon bên trái. | React.ComponentType<{ className?: string }> | — |
rightIcon | Icon bên phải. | React.ComponentType<{ className?: string }> | — |
avatar | Show avatar on the left | string | React.ReactNode | — |
badge | Show badge/tag | React.ReactNode | — |
badgeVariant | Badge color variant | "default" | "success" | "warning" | "error" | "info" | "default" |
action | Action button on hover | React.ReactNode | — |
collapsible | Make item collapsible | boolean | false |
expanded | Expanded state for collapsible | boolean | — |
onExpandChange | Callback when expanded state changes | (expanded: boolean) => void | — |
expandContent | Content to show when expanded | React.ReactNode | — |
contentClassName | Custom class for inner content container (use for padding) | string | — |
Hướng dẫn sử dụng
Dùng List để trình bày dữ liệu có cấu trúc dễ quét. Cần tiêu đề có nghĩa, thứ tự ổn định và hành vi responsive phù hợp với dữ liệu dày.
Trợ năng
Khi dùng List, hãy giữ trạng thái focus dễ nhận biết, cung cấp tên truy cập khi cần và kiểm tra bàn phím cùng trình đọc màn hình trong ngữ cảnh thực tế.