List

A List is a generic list that carries text, lists, images, and paragraphs in a clean and efficient manner.

Property

Property	Type	Required	Default value	Description
radius	boolean	No	false	Whether the list contains rounded corners.
header	string	No	-	The description of the header.
footer	string	No	-	The description of the footer.
className	string	No	-	The class name.

ListItem

Property	Type	Required	Default value	Description
image	string	No	-	The image on the left.
imageSize	'small' \| 'medium' \| 'large'	No	-	The image size.
arrow	'right' \| 'up' \| 'down'	No	-	The direction to which the arrow is pointing. If this property is not passed in, there is no arrow.
title	string	No	-	The title information.
brief	string	No	-	The information on the second row.
extra	string	No	-	Extra content on the right.
extraBrief	string	No	-	The help information on the right.
disabled	boolean	No	false	Whether to disable the component.
last	boolean	No	false	Whether to display the underline.
className	string	No	-	Class name

Slot

Name	Description
header	The content slot of the header.
footer	The content slot of the footer.

Name	Description
brief	The introduction content slot below.
extra	The content slot on the right.
image	The content slot on the left.

Event

Event name	Description	Type
onTap	Callback fired when the icon is tapped.	`( e: Event ) => void`

Style class

Class name	Description
amd-list	The style of the entire list.
amd-list-header	The style of the header.
amd-list-body	The internal content style.
amd-list-footer	The internal content style.

Class name	Description
amd-list-item	The style of an entire list item.
amd-list-item-line	The content style.
amd-list-item-content	The content style except for extra and brief.
amd-list-item-content-main	The main content style.
amd-list-item-image	The style of the image on the left.
amd-list-item-brief	The brief style.
amd-list-item-extra	The extra style.
amd-list-item-arrow	The style of the arrow on the right.

Code sample

Basic usage

The following shows an example of the code in the index.axml file:

<view>
  <list header="Basic usage"  radius="{{radius}}">
    <list-item>1</list-item>
    <list-item>2</list-item>
    <list-item>3</list-item>
  </list>
  <list header="Clickable list"  radius="{{radius}}">
    <list-item image="UnorderedListOutline" arrow="right" onTap="handleTap" data-info="Bill">Bill</list-item>
    <list-item image="PayCircleOutline" arrow="right" onTap="handleTap" data-info="Total assets">Total assets</list-item>
    <list-item image="SetOutline" arrow="right" onTap="handleTap" data-info="Settings">Settings</list-item>
  </list>
  <list 
    radius="{{radius}}" 
    header="Complex layout">
    <list-item>
      Rounded corners
      <switch slot="extra" checked="{{radius}}" onChange="handleSetRadius"/>
    </list-item>
    <list-item 
      extraBrief="not enabled"
      arrow="right">
        Large font size mode
    </list-item>
    <list-item 
      brief="Manage authorized products and devices"
      arrow="{{item.arrow}}">
      Authorized management
    </list-item>
    <list-item 
      title="Title"
      brief="Description information"
      image="AlipaySquareFill" 
      extra="Secondary information"
      imageSize="large"
      extraBrief="Secondary auxiliary information"
      arrow="right">
      Three line list
    </list-item>
  </list>
  <list 
    radius="{{radius}}" 
    header="Disabled status">
    <list-item disabled image="UnorderedListOutline" arrow="right" data-info="Bill">Bill</list-item>
    <list-item disabled image="PayCircleOutline" arrow="right" data-info="Total assets">Total assets</list-item>
  </list>
  <white-space />
</view>

The following shows an example of the code in the index.js file:

Page({
  data: {
    radius: false,
    list: [
      {
        info: 'The first list-item was clicked',
        image:
          'https://gw.alipayobjects.com/mdn/rms_ce4c6f/afts/img/A*XMCgSYx3f50AAAAAAAAAAABkARQnAQ',
        arrow: 'right',
        content: 'The first list-item',
      },
      {
        info: 'The second list-item was clicked',
        image: 'AlipaySquareFill',
        arrow: 'right',
        content: 'The second list-item',
      },
      {
        info: 'The third list-item is clicked',
        image: '',
        arrow: 'right',
        content: 'The third list-item',
      },
    ],
  },
  handleTap(e) {
    my.alert({
      title: 'onTap',
      content: e.currentTarget.dataset.info,
    });
  },
  handleSetRadius(checked) {
    this.setData({
      radius: checked,
    });
  },
});

The following shows an example of the code in the index.acss file:

.customImage {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 12rpx;
  color: red;
  background-color: #e5e5e5;
  border-radius: 12rpx;
  box-sizing: border-box;
}

The following shows an example of the code in the index.json file:

{
  "defaultTitle": "List",
  "usingComponents": {
    "list": "antd-mini/es/List/index",
    "list-item": "antd-mini/es/List/ListItem/index",
    "white-space": "../../components/WhiteSpace/index",
    "switch": "antd-mini/es/Switch/index"
  }
}