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 toam-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: | String | - |
slots
Name | Description | Scope |
---|---|---|
header | Used to fill the list header. | - |
footer | Used to fill the list footer. | - |
ListCell
props
Property | Description | Type | Default value |
---|---|---|---|
type | The type of a list element. Valid values: | 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 | String | - |
brief | Inject the | String | - |
titleEllips | Whether to enable | Boolean | false |
briefEllips | Whether to enable | 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: | String | “” |
arrow | Whether to display the right arrow. It is enabled by default if the | Boolean | false |
href | Whether to enable page redirection upon tapping. If it is set, the | String | - |
content | This short term can be used by default when only | 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 | Boolean | false |
extraNoFlex | Automatically add the | Boolean | false |
contentNoEllips | Automatically add the | Boolean | false |
extraNoEllips | Automatically add the | Boolean | false |
cancelText | Display the | String | “Cancel” |
deleteText | Display the | 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 | - |
extra | If string text is not enough for the placeholder on the right side, you can use the | - |
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
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
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
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
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
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
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
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>