All Products
Search
Document Center

List

Last Updated: May 27, 2021

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

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

ESModule

 
  1. 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

Sample code

 
  1. <template>
  2. <List>
  3. <ListCell type="header" slot="header">单行列表头纯文字</ListCell>
  4. <ListItem content="标签文本"></ListItem>
  5. <ListItem content="标签文本" extra="辅助标签三四五六七八九十"></ListItem>
  6. <ListItem content="可点链接" extra="辅助标签三四五六七八九十" href="#" arrow></ListItem>
  7. <ListItem content="标签文本" arrow></ListItem>
  8. <ListCell type="footer" slot="footer">单行列表尾纯文字</ListCell>
  9. </List>
  10. </template>

Single-line text list

Sample image

Sample code

 
  1. <template>
  2. <div>
  3. <List>
  4. <ListItem content="标签文本">
  5. <AButton slot="extra" size="tiny" type="white">辅助按钮</AButton>
  6. </ListItem>
  7. </List>
  8. <List>
  9. <ListItem content="标签文本" extra="详细信息" arrow></ListItem>
  10. </List>
  11. <List>
  12. <ListItem deletable content="删除列表" arrow></ListItem>
  13. <ListItem deletable content="删除列表" arrow></ListItem>
  14. </List>
  15. <List>
  16. <ListItem content="标签文本" reddot arrow></ListItem>
  17. <ListItem content="标签文本" reddot arrow></ListItem>
  18. </List>
  19. <List>
  20. <ListCell type="header" slot="header">单行列表头纯文字</ListCell>
  21. <ListItem content="受控选中状态">
  22. <ASwitch slot="extra" v-model="ctrl"></ASwitch>
  23. </ListItem>
  24. <ListItem content="选中状态">
  25. <ASwitch slot="extra" :value="true"></ASwitch>
  26. </ListItem>
  27. <ListItem content="未选中状态">
  28. <ASwitch slot="extra" :value="false"></ASwitch>
  29. </ListItem>
  30. <ListItem content="受控选中状态">
  31. <ASwitch platform="android" slot="extra" v-model="ctrl"></ASwitch>
  32. </ListItem>
  33. <ListItem content="安卓样式开">
  34. <ASwitch platform="android" slot="extra" :value="true"></ASwitch>
  35. </ListItem>
  36. <ListItem content="安卓样式关">
  37. <ASwitch platform="android" slot="extra" :value="false"></ASwitch>
  38. </ListItem>
  39. <ListCell type="footer" slot="footer">单行列表尾纯文字</ListCell>
  40. </List>
  41. </div>
  42. </template>
  43. <script>
  44. export default {
  45. data() {
  46. return {
  47. ctrl: true
  48. };
  49. }
  50. };
  51. </script>

Extra-long cell

Sample image

Sample code

 
  1. <template>
  2. <div>
  3. <List>
  4. <ListCell type="header" slot="header">内容超长的情况</ListCell>
  5. <ListItem content="标签文本" extra="辅助标签" arrow></ListItem>
  6. <ListItem content="标签文本" extra="辅助标签单行省略号显示" arrow></ListItem>
  7. </List>
  8. <List>
  9. <ListItem content="标签文本内容尽量多往右显示" extra="辅助标签" extra-no-flex arrow></ListItem>
  10. <ListItem content="标签文本" content-no-flex extra="辅助标签内容尽量多往左显示" arrow></ListItem>
  11. <ListItem content="标签文本内容尽量多往右显示" arrow>
  12. <ListCell slot="extra" type="extra" no-flex>辅助标签</ListCell>
  13. </ListItem>
  14. <ListItem extra="辅助标签内容尽量多往左显示" arrow>
  15. <ListCell type="content" no-flex>标签文本</ListCell>
  16. </ListItem>
  17. </List>
  18. <List>
  19. <ListItem
  20. content="标签文本" content-no-flex
  21. extra="辅助标签多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示" extra-no-ellips
  22. arrow
  23. ></ListItem>
  24. <ListItem arrow>
  25. <ListCell type="content" no-flex>标签文本</ListCell>
  26. <ListCell slot="extra" type="extra" no-ellips>辅助标签多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示多行显示</ListCell>
  27. </ListItem>
  28. </List>
  29. </div>
  30. </template>

Two-line plain text

Sample image

Sample code

 
  1. <template>
  2. <List type="twoline-text">
  3. <ListItem >
  4. <ListCell type="content" title="标签文本" brief="内容文本" ></ListCell>
  5. </ListItem>
  6. <ListItem arrow>
  7. <ListCell type="content" title="标签文本" brief="内容文本" ></ListCell>
  8. </ListItem>
  9. <ListItem arrow>
  10. <ListCell
  11. type="content"
  12. title="标题文本标签文本标题文本标签文本标题文本" title-ellips
  13. brief="标题文本内容文本标题文本内容文本标题文本" brief-ellips
  14. ></ListCell>
  15. </ListItem>
  16. </List>
  17. </template>

Image-text information

Sample image

Sample code

 
  1. <template>
  2. <div>
  3. <List type="ptext">
  4. <ListCell type="header-sp" slot="header">图文列表组合, 附加来源</ListCell>
  5. <ListItem content="标签文本" >
  6. <ListCell type="thumb" slot="thumb" src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png"/>
  7. <ListCell
  8. title="标题"
  9. brief="“全球未来机场计划”是指未来游客在海外机场,通过支付宝使用航班提醒等服务。"
  10. >
  11. <ListCell type="sti" slot="after">
  12. <span>来源 时间 | 其他信息</span>
  13. </ListCell>
  14. </ListCell>
  15. </ListItem>
  16. </List>
  17. <List type="ptext">
  18. <ListCell type="header-sp" slot="header">图文列表组合, 附加来源</ListCell>
  19. <ListItem content="标签文本" >
  20. <ListCell type="thumb" slot="thumb" src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png"/>
  21. <ListCell
  22. title="标题"
  23. brief="“全球未来机场计划”是指未来游客在海外机场,通过支付宝使用航班提醒等服务。"
  24. />
  25. </ListItem>
  26. <ListItem content="标签文本" >
  27. <ListCell type="thumb" slot="thumb" src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png"/>
  28. <ListCell
  29. title="标题"
  30. brief="“全球未来机场计划”是指未来游客在海外机场,通过支付宝使用航班提醒等服务。"
  31. />
  32. </ListItem>
  33. <ListItem type="more" slot="footer">查看更多</ListCell>
  34. </List>
  35. </div>
  36. </template>

Information list

Sample image

Sample code

 
  1. <template>
  2. <div>
  3. <List type="info" >
  4. <ListItem type="oneline" content="标签文本标签文本" extra="标签文本标签文本标签文本标签文本" />
  5. </List>
  6. <List type="info" >
  7. <ListItem type="oneline" content="标签文本标签文本" extra="标签文本标签文本标签文本标签文本" arrow/>
  8. </List>
  9. <List type="info">
  10. <ListItem type="more">
  11. <ListItem type="part" content="标签文本" extra="标签文本标签文本标签文本标签文本" arrow/>
  12. <ListItem type="part" :content="false" extra="标签文本标签文本标签文本标签文本"/>
  13. </ListItem>
  14. </List>
  15. <List type="info">
  16. <ListItem>
  17. <ListItem type="part" content="标签文本" extra="标签文本标签文本标签文本标签文本" />
  18. <ListItem type="part" :content="false" extra="标签文本标签文本标签文本标签文本"/>
  19. </ListItem>
  20. </List>
  21. <List type="info">
  22. <ListItem type="more">
  23. <ListItem type="part" content="标签文本" extra="标签文本标签文本标签文本标签文本" arrow/>
  24. <ListItem type="part" content="标签文本" extra="标签文本标签文本标签文本标签文本"/>
  25. </ListItem>
  26. </List>
  27. </div>
  28. </template>

Left-right lines

Sample image

Sample code

 
  1. <template>
  2. <div>
  3. <List type="bank" >
  4. <ListCell type="header" slot="header">银行卡列表(圆图 72 x 72(ios), 108 x 108(ios))</ListCell>
  5. <ListItem arrow>
  6. <ListCell type="thumb" src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png" slot="thumb"/>
  7. <ListCell title="招商银行" brief="尾号7785"/>
  8. </ListItem>
  9. </List>
  10. <List type="twoline-side" >
  11. <ListCell type="header-sp" slot="header">左右文字组合列表</ListCell>
  12. <ListItem >
  13. <ListCell title="标题一" brief="内容一" />
  14. <ListCell type="extra" title="标题二" brief="内容二" slot="extra"/>
  15. </ListItem>
  16. <ListItem >
  17. <ListCell title="标题一" brief="内容一" />
  18. <ListCell type="extra" title="标题二" brief="内容二" slot="extra"/>
  19. </ListItem>
  20. <ListItem >
  21. <ListCell type="thumb" src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png" />
  22. <ListCell title="标题一" brief="内容一" />
  23. <ListCell type="extra" title="标题二" brief="内容二" slot="extra"/>
  24. </ListItem>
  25. <ListItem >
  26. <ListCell type="thumb" src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png" />
  27. <ListCell title="标题一" brief="内容一" />
  28. <ListCell type="extra" title="标题二" slot="extra"/>
  29. </ListItem>
  30. </List>
  31. </div>
  32. </template>