Phiên bản: 1.11.0

List

Cập nhật lần cuối: 23/6/2025

import { List } from "zmp-ui";

Dùng để hiển thị dạng dữ liệu dạng danh sách.

Ví dụ

Name	Type	Default	Description
children	`React.ReactNode`		Các phần tử cần được hiển thị trong danh sách. Không có tác dụng khi sử dụng cùng với `dataSource`.
dataSource	`T[]`		Dùng `dataSource` kết hợp với `renderItem` để hiển thị danh sách các phần tử, thay vì truyền trực tiếp các phần tử dưới dạng children. Data source bắt buộc phải là một mảng các giá trị, kiểu giá trị có thể là bất kỳ kiểu dữ liệu nào.
divider	`boolean`	`true`	Hiển thị viền ngăn cách giữa các phần tử trong danh sách.
loading	`boolean`	`false`	Trạng thái loading của danh sách.
noSpacing	`boolean`	`false`	Không hiển thị khoảng cách giữa các phần tử trong danh sách.
renderItem	`(item: T, index: number, loading: boolean) => React.ReactNode`		Hàm dùng để render từng item trong `dataSource`. Hàm này nhận vào 3 tham số: `item`: Giá trị cần được render, được lấy từ `dataSource`. `index`: Vị trí hiện tại của item đang cần được render. `loading`: Trạng thái loading của danh sách. Kết quả trả về một `ReactNode`, khuyến khích là `<ListItem>`.

Name	Type	Description
brackets	`string`	Nội dung nằm bên trong ngoặc, phía sau tiêu đề chính của list item. Thường được dùng để bổ sung thêm thông tin.
children	`React.ReactNode`	Phần tử cần được hiển thị trực tiếp bên trong list item. Nằm bên dưới tiêu đề chính và tiêu đề phụ.
prefix	`React.ReactNode`	Phần tử cần được hiển thị ở đầu list item. Thường là icon.
subTitle	`string`	Tiêu đề phụ của list item. Nằm bên dưới tiêu đề chính.
suffix	`React.ReactNode`	Phần tử cần được hiển thị ở cuối list item. Thường là icon.
title	`string`	Tiêu đề của list item.
onClick	`React.MouseEventHandler`	Callback được gọi khi list item được click / press.