All Products
Search
Document Center

List

Last Updated: Mar 01, 2022

This topic describes different methods of using the List component and the API descriptions:

This topic describes different methods of using the List component and the API descriptions:

  • Use this component in the Kylin project.

  • Use this component in other projects. Import it through ESModule.

  • API description provides API information for props, slots, and events.

To view the visual effects and code sample of the component, see Demo.

List items are in a complex structure, comprising single-line or multi-line text lists, forms, verification codes, and form elements such as checkbox, radio, and switch. Functions are divided by using List, ListCell, and ListItem.

  • List: A list packet, equivalent to am-list. For details about the supported types, see API description.

  • ListItem: A one-line list item, which can be used in ordinary list layout. For details about the supported types, see API description.

  • Listcell: Various blocks in a list item, which can be used in a complex layout through flexible combination. For details about the supported types, see API description.

Kylin

<dependency component="{ List, ListItem, ListCell }" src="@alipay/antui-vue" ></dependency>

ESModule

import { List, ListItem, ListCell } from '@alipay/antui-vue';

API description

List

props

Property

Description

Type

Default value

type

The type of the list. Valid values: "form", "twoline", "twoline-text", "twoline-side", "moreline", "ptext", "users", "users-sm", "users-lg", "bank", "info", and "delete".

String

-

slots

Name

Description

Scope

header

Used to fill the list header. ListCell is recommended,

-

footer

Used to fill the list footer. ListCell is recommended.

-

ListCell

props

Property

Description

Type

Default value

type

The type of a list element. Valid values: "content", "brief", "extra", "arrow", "thumb", "title", "brief", "sti", "header", "footer", and "header-sp".

String

“content”

noFlex

Whether to remove the flex for the current cell.

Boolean

false

noEllips

Whether the single-line style is not required for the content in a cell.

Boolean

false

alignTop

Whether the content in a cell is aligned to the top.

Boolean

false

twoColumn

Display the content in a cell in two columns.

Boolean

false

title

Inject the ListCell [type = title] node to enter the text.

String

-

brief

Inject the ListCell[type=brief] node to enter the text.

String

-

titleEllips

Whether to enable am-ft-ellipsis for the title injection node.

Boolean

false

briefEllips

Whether to enable am-ft-ellipsis for the brief injection node.

Boolean

false

slots

Name

Description

Scope

-

Used for filling in the child node.

-

events

Name

Description

Function

click

Triggered upon a tap operation.

Function(event: event): void

ListItem

props

Property

Description

Type

Default value

type

The type of list lines. Valid values: "", "twoline", "moreline", "check", "radio", "more", "part", "delete"

String

“”

arrow

Whether to display the right arrow. It is enabled by default if the href attribute is configured (href is unavailable when arrow=true).

Boolean

false

href

Whether to enable page redirection upon tapping. If it is set, the A label is added to DOM, otherwise the DIV label is added.

String

-

content

This short term can be used by default when only ListCell[type=content] is filled in a placeholder.

String

-

extra

Placeholder text on the right side

String

-

reddot

Display red dots in the extra part on the right side.

Boolean

-

deletable

Whether to display the Delete button on the left side of a list.

Boolean

-

contentNoFlex

Automatically add the ListCell[noFlex] attribute for content.

Boolean

false

extraNoFlex

Automatically add the ListCell[noFlex] attribute for extra.

Boolean

false

contentNoEllips

Automatically add the ListCell[noEllips] attribute for content.

Boolean

false

extraNoEllips

Automatically add the ListCell[noEllips] attribute for extra.

Boolean

false

cancelText

Display the Cancel text when [type=delete].

String

“Cancel”

deleteText

Display the Delete text when [type=delete].

String

“Delete”

indentLine

The indentation of an underscore. Valid values: “”, “thumb”, “twoline”.

String

“”

slots

Name

Description

Scope

thumb

The placeholder for the thumbnail on the left side.

-

-

Default placeholder. To quickly fill the ListCell[type=content] node, you can directly use the content attribute.

-

extra

If string text is not enough for the placeholder on the right side, you can use the DOM node instead.

-

events

Name

Description

Function

click

Triggered upon a tap operation.

Function(event: event): void

cancel

Tap it to cancel when [type=delete].

Function(): void

delete

Tap it to delete when [type=delete].

Function(): void

Demo

List header and footer

Sample image

Available Link

Sample code

<template>
  <List>
    <ListCell type="header" slot="header">Single-line list header</ListCell>
    <ListItem content="Tag"></ListItem>
    <ListItem content="Tag" extra="Auxiliary Tag three four five six seven eight nine ten"></ListItem>
    <ListItem content="Available link" extra="Auxiliary Tag three four five six seven eight nine ten" href="#" arrow></ListItem>
    <ListItem content="Tag" arrow></ListItem>
    <ListCell type="footer" slot="footer">Single-line list footer</ListCell>
  </List>

</template>

Single-line text list

Sample image

Selected state

Sample code

<template>

  <div>
    <List>
      <ListItem content="Tag">
        <AButton slot="extra" size="tiny" type="white">Auxiliary button</AButton>
      </ListItem>
    </List>

    <List>
      <ListItem content="Tag" extra="Details" arrow></ListItem>
    </List>

    <List>
      <ListItem deletable content="Delete list" arrow></ListItem>
      <ListItem deletable content="Delete list" arrow></ListItem>
    </List>

    <List>
      <ListItem content="Tag" reddot arrow></ListItem>
      <ListItem content="Tag" reddot arrow></ListItem>
    </List>

    <List>
      <ListCell type="header" slot="header">Single-line list header</ListCell>
      <ListItem content="Control selected state">
        <ASwitch slot="extra" v-model="ctrl"></ASwitch>
      </ListItem>
      <ListItem content="Selected state">
        <ASwitch slot="extra" :value="true"></ASwitch>
      </ListItem>
      <ListItem content="Unselected state">
        <ASwitch slot="extra" :value="false"></ASwitch>
      </ListItem>
      <ListItem content="Control selected tate">
        <ASwitch platform="android" slot="extra" v-model="ctrl"></ASwitch>
      </ListItem>
      <ListItem content="Enable Android Style
">
        <ASwitch platform="android" slot="extra" :value="true"></ASwitch>
      </ListItem>
      <ListItem content="Disable Android Style">
        <ASwitch platform="android" slot="extra" :value="false"></ASwitch>
      </ListItem>
      <ListCell type="footer" slot="footer">Single-line list footer</ListCell>
    </List>

  </div>

</template>

<script>
  export default {
    data() {
      return {
        ctrl: true
      };
    }
  };
</script>

Extra-long cell

Sample image

Auxiliary Tag

Sample code

<template>

  <div>

    <List>
      <ListCell type="header" slot="header">In case of overly long text</ListCell>
      <ListItem content="Tag" extra="Auxiliary Tag" arrow></ListItem>
      <ListItem content="Tag" extra="Auxiliary tag single-line ellipsis display" arrow></ListItem>
    </List>

    <List>
      <ListItem content="The content of tag texts is displayed on the right" extra="Auxiliary Tag" extra-no-flex arrow></ListItem>
      <ListItem content="Tag" content-no-flex extra="The content of auxiliary tags is displayed on the left" arrow></ListItem>

      <ListItem content="The content of tag texts is displayed on the right" arrow>
        <ListCell slot="extra" type="extra" no-flex>Auxiliary Tag</ListCell>
      </ListItem>
      <ListItem extra="The content of auxiliary tags is displayed on the left" arrow>
        <ListCell type="content" no-flex>Tag</ListCell>
      </ListItem>
    </List>

    <List>
      <ListItem 
        content="Tag" content-no-flex 
        extra="Auxiliary Tag Multi-line DisplayMulti-line DisplayMulti-line DisplayMulti-line DisplayMulti-line DisplayMulti-line DisplayMulti-line DisplayMulti-line DisplayMulti-line Display" extra-no-ellips 
        arrow
      ></ListItem>

      <ListItem arrow>
        <ListCell type="content" no-flex>Tag</ListCell>
        <ListCell slot="extra" type="extra" no-ellips>Auxiliary Tag Multi-line DisplayMulti-line DisplayMulti-line DisplayMulti-line DisplayMulti-line DisplayMulti-line DisplayMulti-line DisplayMulti-line DisplayMulti-line Display</ListCell>
      </ListItem>

    </List>

  </div>

</template>

Two-line plain text

Sample image

Title Text

Sample code

<template>

  <List type="twoline-text">
    <ListItem >
      <ListCell type="content" title="Tag" brief="Content" ></ListCell>
    </ListItem>
    <ListItem arrow>
      <ListCell type="content" title="Tag" brief="Content" ></ListCell>
    </ListItem>
    <ListItem arrow>
      <ListCell 
        type="content" 
        title="Title Tag Title Tag Title" title-ellips
        brief="Title Content Title Content Title" brief-ellips
      ></ListCell>
    </ListItem>
  </List>

</template>

Image-text information

Sample image

Global airport plan

Sample code

<template>
  <div>
    <List type="ptext">
      <ListCell type="header-sp" slot="header">Image & Text Pattern with a source attatched</ListCell>
      <ListItem content="Tag" >
        <ListCell type="thumb" slot="thumb" src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png"/>
        <ListCell 
          title="Title" 
          brief="“"Global Airport Plan" means Alipay will give tourists in overseas airports access to services such as Flight Reminder."
        >
          <ListCell type="sti" slot="after">
            <span>Source Time | Other Info</span>
          </ListCell>
        </ListCell>
      </ListItem>
    </List>

    <List type="ptext">
      <ListCell type="header-sp" slot="header">Image & Text Pattern with a source attatched</ListCell>
      <ListItem content="Tag" >
        <ListCell type="thumb" slot="thumb" src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png"/>
        <ListCell 
          title="Title" 
          brief="“"Global Airport Plan" means Alipay will give tourists in overseas airports access to services such as Flight Reminder."
        />
      </ListItem>
      <ListItem content="Tag" >
        <ListCell type="thumb" slot="thumb" src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png"/>
        <ListCell 
          title="Title" 
          brief="“"Global Airport Plan" means Alipay will give tourists in overseas airports access to services such as Flight Reminder."
        />
      </ListItem>
      <ListItem type="more" slot="footer">See More</ListCell>
    </List>
  </div>

</template>

Information list

Sample image

Tag

Sample code

<template>
  <div>

    <List type="info" >
      <ListItem type="oneline" content="TagTag" extra="Tag Tag Tag Tag" />
    </List>

    <List type="info" >
      <ListItem type="oneline" content="TagTag" extra="Tag Tag Tag Tag" arrow/>
    </List>

    <List type="info">
      <ListItem type="more">
        <ListItem type="part" content="Tag" extra="Tag Tag Tag Tag" arrow/>
        <ListItem type="part" :content="false" extra="Tag Tag Tag Tag"/>
      </ListItem>
    </List>

    <List type="info">
      <ListItem>
        <ListItem type="part" content="Tag" extra="Tag Tag Tag Tag" />
        <ListItem type="part" :content="false" extra="Tag Tag Tag Tag"/>
      </ListItem>
    </List>

    <List type="info">
      <ListItem type="more">
        <ListItem type="part" content="Tag" extra="Tag Tag Tag Tag" arrow/>
        <ListItem type="part" content="Tag" extra="Tag Tag Tag Tag"/>
      </ListItem>
    </List>
  </div>

</template>

Left-right lines

Sample image

CMB

Sample code

<template>
  <div>

    <List type="bank" >
      <ListCell type="header" slot="header">Bank Card List(Round Image 72 x 72(ios), 108 x 108(ios))</ListCell>
      <ListItem arrow>
        <ListCell type="thumb" src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png" slot="thumb"/>
        <ListCell title="CMB" brief="Ending in 7785"/>
      </ListItem>
    </List>

    <List type="twoline-side" >
      <ListCell type="header-sp" slot="header">Left & Right text list</ListCell>
      <ListItem >
        <ListCell title="Title 1" brief="Content 1" />
        <ListCell type="extra" title="Title 2" brief="Content 2" slot="extra"/>
      </ListItem>
      <ListItem >
        <ListCell title="Title 1" brief="Content 1" />
        <ListCell type="extra" title="Title 2" brief="Content 2" slot="extra"/>
      </ListItem>

      <ListItem >
        <ListCell type="thumb" src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png" />
        <ListCell title="Title 1" brief="Content 1" />
        <ListCell type="extra" title="Title 2" brief="Content 2" slot="extra"/>
      </ListItem>
      <ListItem >
        <ListCell type="thumb" src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png" />
        <ListCell title="Title 1" brief="Content 1" />
        <ListCell type="extra" title="Title 2" slot="extra"/>
      </ListItem>

    </List>

  </div>

</template>