Chuyển tới nội dung chính

List

import { List } from "zmp-ui";

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

Ví dụ

Bảng thuộc tính

ListProps

PropertyTypeRequiredDescription
dataSourceT[]NoDù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.
renderItem(item: T, index: number, loading: boolean) => React.ReactNodeNoHà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à ``.
loadingbooleanNoTrạng thái loading của danh sách. (default: false)
dividerbooleanNoHiển thị viền ngăn cách giữa các phần tử trong danh sách. (default: true)
noSpacingbooleanNoKhông hiển thị khoảng cách giữa các phần tử trong danh sách. (default: false)
childrenReact.ReactNodeNoCá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`._

ListItemProps

PropertyTypeRequiredDescription
titlestringNoTiêu đề của list item.
subTitlestringNoTiêu đề phụ của list item. Nằm bên dưới tiêu đề chính.
prefixReact.ReactNodeNoPhần tử cần được hiển thị ở đầu list item. Thường là icon.
suffixReact.ReactNodeNoPhần tử cần được hiển thị ở cuối list item. Thường là icon.
bracketsstringNoNộ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.
childrenReact.ReactNodeNoPhầ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ụ.
onClickReact.MouseEventHandlerNoCallback được gọi khi list item được click / press.