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	array		Mảng các giá trị cần hiển thị.
loading	boolean		Hiển thị loading
renderItem	function		Hàm render các giá trị trong dataSource.
divider	boolean		Ngăn cách các item
children	React.ReactNode

List.Item

Name	Type	Default	Description
visibilityToggle	boolean		Hiển thị icon hiện hoặc ẩn password

List.Item

Name	Type	Default	Description
visibilityToggle	boolean		Hiển thị icon hiện hoặc ẩn password

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>
  );
}