List

Cập nhật lần cuối: 27/05/2022

Hiển thị dạng dữ liệu dạng danh sách

Properties

List

Name	Type	Default	Description
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>.

List.Item

Name	Type	Default	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.
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.

Example

Open Sandbox

import React from "react";
import { Page, List, Icon, Button } from "zmp-ui";

const { Item } = List;
export default function HomePage(props) {
  return (
    <Page className="section-container">
      <List>
        <Item title="Title" suffix={<Icon icon="zi-chevron-right" />} />
        <Item
          title="Sample text title"
          prefix={<Icon icon="zi-user" />}
          suffix={<Icon icon="zi-check" />}
        />
        <Item
          title="Title"
          suffix={<Icon icon="zi-chevron-right" />}
          subTitle="subtitle"
        />
        <Item title="Title" prefix={<Icon icon="zi-user" />} />
        <Item title="Title" brackets="Brackets" />
        <Item title="Title" subTitle="Subtitle" />
        <Item
          title="Title"
          subTitle="Subtitle"
          suffix={<Icon icon="zi-chevron-right" />}
        />
      </List>
    </Page>
  );
}