@illa-design/list v1.3.0

List

The list component is used to display text, pictures or paragraphs.

Installation

yarn add @illa-design/list

Import component

import { List } from "@illa-design/list"

API

List Basic Properties

List Events

List-item Basic Properties

List-item-meta Basic Properties

Examples

Basic usage

<List
  data={[
    { title: "Title A", description: "Desc A" },
    { title: "Title B", description: "Desc B" },
    { title: "Title C", description: "Desc C" },
    { title: "Title D", description: "Desc D" },
    { title: "Title E", description: "Desc E" },
  ]}
  render={(data, index) => {
   return (
      <ListItem
        actions={<Button>Actions</Button>}
        extra={<Image src={"https://devbo.cn/logo.svg"} />}
      >
        <ListItemMeta title={data.title} description={data.description} />
      </ListItem>
    )
  }}
  renderKey={(data, index) => {
    return index.toString()
  }}
/>,

Set list bordered

<List
 data={[
    { title: "Title A", description: "Desc A" },
    { title: "Title A", description: "Desc A" },
  ]}
  render={(data) => {
    return (
     <ListItem>
        <ListItemMeta title={data.title} description={data.description} />
          </ListItem>
        )
      }}
      renderKey={(data, index) => {
        return index.toString()
 }}
/>,