全部产品
云市场

List 列表

更新时间:2020-04-28 16:56:23

List 列表文档介绍了使用该组件的不同方式以及 API 文档:

  • Kylin 工程中使用该组件。
  • 在别的工程中使用,通过 ESModule 的方式来导入组件。

API 文档 提供了 props、slots、events 的接口信息。

列表项由于结构复杂,单行或多行文字列表,表单,校验码,以及 checkbox,radio, switch 等表单元素。分别使用 List,ListCell,ListItem 来进行功能拆分。

  • List: 列表外包裹,等价于am-list,支持类型见API文档
  • ListItem: 一行列表项目,能满足一般的列表布局,支持类型见API文档
  • ListCell: 列表项中的各种块,便于灵活搭配结构,满足复杂布局,支持类型见API文档

Kylin

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

ESModule

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

API 文档

List

props

属性 说明 类型 默认值
type 列表类型,可选值为form,twoline,twoline-text,twoline-side,moreline,ptext,users,users-sm,users-lg,bank,info, delete string -

slots

name 说明 scope
header 用于填充列表头,推荐使用ListCell -
footer 用于填充列表尾,推荐使用ListCell -

ListCell

props

属性 说明 类型 默认值
type 列表元素类型,可选值为content,brief,extra,arrow,thumb,title, brief, sti, header, footer, header-sp string content
noFlex 本单元格是否清除flex boolean false
noEllips 单元格内容是否不需要单行… boolean false
alignTop 单元格内容是否居上 boolean false
twoColumn 单元格内容左右两列显示 boolean false
title 注入ListCell[type=title]节点,填充文本 string -
brief 注入ListCell[type=brief]节点,填充文本 string -
titleEllips title注入节点是否开启am-ft-ellipsis省略 boolean false
briefEllips brief注入节点是否开启am-ft-ellipsis省略 boolean false

slots

name 说明 scope
- 用于填充子节点 -

events

name 说明 函数
click 当点击时触发 Function(event: event): void

ListItem

props

属性 说明 类型 默认值
type 列表行类型,可选值为`,twoline,moreline,check,radio,more,part,delete`(当arrow=true, href时不可用) string
arrow 是否显示右侧箭头, 如果配置了href属性会默认启用 boolean false
href 是否需要点击即跳转页面,设置后DOMA标签,不设置为DIV标签 string -
content 默认占位符中仅填充 ListCell[type=content] 的字符串时,可以用此简写 stirng -
extra 右侧占位文本 string -
reddot 右侧extra部分显示小红点 boolean -
deletable 是否显示列表左侧删除按钮 boolean -
contentNoFlex content自动加入ListCell[noFlex]属性 boolean false
extraNoFlex extra自动加入ListCell[noFlex]属性 boolean false
contentNoEllips content自动加入ListCell[noEllips]属性 boolean false
extraNoEllips extra自动加入ListCell[noEllips]属性 boolean false
cancelText 当[type=delete]显示的取消文案 string ‘取消’
deleteText 当[type=delete]显示的删除文案 string ‘删除’
indentLine 下划线的缩进类型,可选值为 ‘’,’thumb’,’twoline’ string ‘’

slots

name 说明 scope
thumb 左侧略缩图占位 -
- 默认占位,如果需要快速填充 ListCell[type=content] 节点,可直接使用content属性 -
extra 右侧占位如果不满足于字符串文本,可使用DOM节点代替 -

events

name 说明 函数
click 当点击时触发 Function(event: event): void
cancel 当[type=delete] 时点击取消 Function(): void
delete 当[type=delete] 时点击删除 Function(): void

Demo

表头表尾

截图

代码

  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>

单行文字列表

截图

代码

  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>

单元格超长

截图

代码

  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>

双行纯文字

截图

代码

  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>

图文信息

截图

代码

  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>

信息列表

截图

代码

  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>

左右双行

截图

代码

  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>