1.3.0 • Published 2 years ago

@illa-design/list v1.3.0

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
2 years ago

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

PropsDescTypeDefault
dataData of the list itemany[]-
sizeSize of the list"small" | "medium" | "large""medium"
borderedIf true, the list is borderedbooleantrue
splitIf true, show the split linebooleantrue
loadingIf true, the list is on loading statusbooleanfalse
hasMoreIf true, the list can load moreboolean-
loaderThe load more areaReactNode-
endMessageWhen the loading endsReactNode-
hoverableIf true, the list is hoverablebooleanfalse
heightMax height of the listnumber0
bottomOffsetThe distance to the bottomnumber0
headerThe header of the listReactNode-
footerThe footer of the listReactNode-
renderRender itemReactNode-
renderKeyRender item keystring-

List Events

PropsDescTypeDefault
onScrollCallback when scroll--
onReachBottomCalback when reach bottom--

List-item Basic Properties

PropsDescTypeDefault
actionsThe bottom action areaReactNode-
extraThe extra action area on the rightReactNode-

List-item-meta Basic Properties

PropsDescTypeDefault
titleThe title of the list itemReactNode-
avatarThe avatar of the list itemReactNode-
descriptionThe description of the itemReactNode-

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()
 }}
/>,
1.2.0

2 years ago

1.3.0

2 years ago

1.0.29

2 years ago

1.0.28

2 years ago

1.0.27

2 years ago

1.0.31

2 years ago

1.0.30

2 years ago

1.1.0

2 years ago

1.0.22

2 years ago

1.0.21

2 years ago

1.0.26

2 years ago

1.0.25

2 years ago

1.0.24

2 years ago

1.0.23

2 years ago

1.0.19

2 years ago

1.0.18

2 years ago

1.0.17

2 years ago

1.0.20

2 years ago

1.0.16

2 years ago

1.0.15

2 years ago

1.0.14

2 years ago

1.0.9

3 years ago

1.0.8

3 years ago

1.0.7

3 years ago

1.0.6

3 years ago

1.0.11

3 years ago

1.0.10

3 years ago

1.0.13

3 years ago

1.0.12

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago

0.0.10

3 years ago

0.0.11

3 years ago

0.0.12

3 years ago

0.0.13

3 years ago

0.0.14

3 years ago

0.0.15

3 years ago

0.0.9

3 years ago

0.0.16

3 years ago

0.0.17

3 years ago

0.0.8

3 years ago

0.0.5

3 years ago

0.0.4

3 years ago

0.0.7

3 years ago

0.0.6

3 years ago

0.0.3

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago