本文介绍使用列表组件的不同方式以及相关 API。
此外,如需查看该组件的视觉效果及示例代码,请参见本文的 Demo。
列表项由于结构复杂,包含单行或多行文字列表、表单、校验码以及 checkbox、radio、switch 等表单元素。分别使用 List、ListCell、ListItem 来进行功能拆分。
List:列表外包裹,等价于 am-list,支持类型见 API 说明。
ListItem:一行列表项目,能满足一般的列表布局,支持类型见 API 说明。
ListCell:列表项中的各种块,便于灵活搭配结构,满足复杂布局,支持类型见 API 说明。
Kylin
<dependency component="{ List, ListItem, ListCell }" src="@alipay/antui-vue" ></dependency>
ESModule
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
属性 | 说明 | 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:用于填充子节点。
events
属性 | 说明 | 函数 |
---|---|---|
click | 单击时触发。 | Function(event: event): void |
ListItem
props
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
type | 列表行类型,可选值为 “”,”twoline”,”moreline”,”check”,”radio”,”more”,”part”,”delete”。 | String | “” |
arrow | 是否显示右侧箭头, 如果配置了 | boolean | false |
href | 是否需要单击即跳转页面,设置后 DOM 为 A 标签,不设置为 DIV 标签。 | String | - |
content | 默认占位符中仅填充 ListCell[type=content] 的字符串时,可以用此简写。 | Stirng | - |
extra | 右侧占位文本。 | String | - |
reddot | 右侧 extra 部分显示小红点。 | boolean | - |
deletable | 是否显示列表左侧删除按钮。 | boolean | - |
contentNoFlex | 对 content 自动加入 | boolean | false |
extraNoFlex | 对 extra 自动加入 | boolean | false |
contentNoEllips | 对 content 自动加入 | boolean | false |
extraNoEllips | 对 extra 自动加入 | boolean | false |
cancelText | 当 [type=delete] 时,显示 “取消” 文案。 | String | “取消” |
deleteText | 当 [type=delete] 时,显示 “删除” 文案。 | String | “删除” |
indentLine | 下划线的缩进类型,可选值为 “”、”thumb”、”twoline”。 | String | “” |
slots
属性 | 说明 | scope |
---|---|---|
thumb | 左侧略缩图占位。 | - |
- | 默认占位,如果需要快速填充 ListCell[type=content] 节点,可直接使用 | - |
extra | 右侧占位如果不满足于字符串文本,可使用 DOM 节点代替。 | - |
events
属性 | 说明 | 函数 |
---|---|---|
click | 单击时触发。 | Function(event: event): void |
cancel | 当 [type=delete] 时单击取消。 | Function(): void |
delete | 当 [type=delete] 时单击删除。 | Function(): void |
Demo
表头表尾
截图
代码示例
<template>
<List>
<ListCell type="header" slot="header">单行列表头纯文字</ListCell>
<ListItem content="标签文本"></ListItem>
<ListItem content="标签文本" extra="辅助标签三四五六七八九十"></ListItem>
<ListItem content="可点链接" extra="辅助标签三四五六七八九十" href="#" arrow></ListItem>
<ListItem content="标签文本" arrow></ListItem>
<ListCell type="footer" slot="footer">单行列表尾纯文字</ListCell>
</List>
</template>
单行文字列表
截图
代码示例
<template>
<div>
<List>
<ListItem content="标签文本">
<AButton slot="extra" size="tiny" type="white">辅助按钮</AButton>
</ListItem>
</List>
<List>
<ListItem content="标签文本" extra="详细信息" arrow></ListItem>
</List>
<List>
<ListItem deletable content="删除列表" arrow></ListItem>
<ListItem deletable content="删除列表" arrow></ListItem>
</List>
<List>
<ListItem content="标签文本" reddot arrow></ListItem>
<ListItem content="标签文本" reddot arrow></ListItem>
</List>
<List>
<ListCell type="header" slot="header">单行列表头纯文字</ListCell>
<ListItem content="受控选中状态">
<ASwitch slot="extra" v-model="ctrl"></ASwitch>
</ListItem>
<ListItem content="选中状态">
<ASwitch slot="extra" :value="true"></ASwitch>
</ListItem>
<ListItem content="未选中状态">
<ASwitch slot="extra" :value="false"></ASwitch>
</ListItem>
<ListItem content="受控选中状态">
<ASwitch platform="android" slot="extra" v-model="ctrl"></ASwitch>
</ListItem>
<ListItem content="安卓样式开">
<ASwitch platform="android" slot="extra" :value="true"></ASwitch>
</ListItem>
<ListItem content="安卓样式关">
<ASwitch platform="android" slot="extra" :value="false"></ASwitch>
</ListItem>
<ListCell type="footer" slot="footer">单行列表尾纯文字</ListCell>
</List>
</div>
</template>
<script>
export default {
data() {
return {
ctrl: true
};
}
};
</script>
单元格超长
截图
代码示例
<template>
<div>
<List>
<ListCell type="header" slot="header">内容超长的情况</ListCell>
<ListItem content="标签文本" extra="辅助标签" arrow></ListItem>
<ListItem content="标签文本" extra="辅助标签单行省略号显示" arrow></ListItem>
</List>
<List>
<ListItem content="标签文本内容尽量多往右显示" extra="辅助标签" extra-no-flex arrow></ListItem>
<ListItem content="标签文本" content-no-flex extra="辅助标签内容尽量多往左显示" arrow></ListItem>
<ListItem content="标签文本内容尽量多往右显示" arrow>
<ListCell slot="extra" type="extra" no-flex>辅助标签</ListCell>
</ListItem>
<ListItem extra="辅助标签内容尽量多往左显示" arrow>
<ListCell type="content" no-flex>标签文本</ListCell>
</ListItem>
</List>
<List>
<ListItem
content="标签文本" content-no-flex
extra="辅助标签多行显示" extra-no-ellips
arrow
></ListItem>
<ListItem arrow>
<ListCell type="content" no-flex>标签文本</ListCell>
<ListCell slot="extra" type="extra" no-ellips>辅助标签多行显示</ListCell>
</ListItem>
</List>
</div>
</template>
双行纯文字
截图
代码示例
<template>
<List type="twoline-text">
<ListItem >
<ListCell type="content" title="标签文本" brief="内容文本" ></ListCell>
</ListItem>
<ListItem arrow>
<ListCell type="content" title="标签文本" brief="内容文本" ></ListCell>
</ListItem>
<ListItem arrow>
<ListCell
type="content"
title="标题文本标签文本标题文本标签文本标题文本" title-ellips
brief="标题文本内容文本标题文本内容文本标题文本" brief-ellips
></ListCell>
</ListItem>
</List>
</template>
图文信息
截图
代码示例
<template>
<div>
<List type="ptext">
<ListCell type="header-sp" slot="header">图文列表组合, 附加来源</ListCell>
<ListItem content="标签文本" >
<ListCell type="thumb" slot="thumb" src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png"/>
<ListCell
title="标题"
brief="“全球未来机场计划”是指未来游客在海外机场,通过支付宝使用航班提醒等服务。"
>
<ListCell type="sti" slot="after">
<span>来源 时间 | 其他信息</span>
</ListCell>
</ListCell>
</ListItem>
</List>
<List type="ptext">
<ListCell type="header-sp" slot="header">图文列表组合, 附加来源</ListCell>
<ListItem content="标签文本" >
<ListCell type="thumb" slot="thumb" src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png"/>
<ListCell
title="标题"
brief="“全球未来机场计划”是指未来游客在海外机场,通过支付宝使用航班提醒等服务。"
/>
</ListItem>
<ListItem content="标签文本" >
<ListCell type="thumb" slot="thumb" src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png"/>
<ListCell
title="标题"
brief="“全球未来机场计划”是指未来游客在海外机场,通过支付宝使用航班提醒等服务。"
/>
</ListItem>
<ListItem type="more" slot="footer">查看更多</ListCell>
</List>
</div>
</template>
信息列表
截图
代码示例
<template>
<div>
<List type="info" >
<ListItem type="oneline" content="标签文本标签文本" extra="标签文本标签文本标签文本标签文本" />
</List>
<List type="info" >
<ListItem type="oneline" content="标签文本标签文本" extra="标签文本标签文本标签文本标签文本" arrow/>
</List>
<List type="info">
<ListItem type="more">
<ListItem type="part" content="标签文本" extra="标签文本标签文本标签文本标签文本" arrow/>
<ListItem type="part" :content="false" extra="标签文本标签文本标签文本标签文本"/>
</ListItem>
</List>
<List type="info">
<ListItem>
<ListItem type="part" content="标签文本" extra="标签文本标签文本标签文本标签文本" />
<ListItem type="part" :content="false" extra="标签文本标签文本标签文本标签文本"/>
</ListItem>
</List>
<List type="info">
<ListItem type="more">
<ListItem type="part" content="标签文本" extra="标签文本标签文本标签文本标签文本" arrow/>
<ListItem type="part" content="标签文本" extra="标签文本标签文本标签文本标签文本"/>
</ListItem>
</List>
</div>
</template>
左右双行
截图
代码示例
<template>
<div>
<List type="bank" >
<ListCell type="header" slot="header">银行卡列表(圆图 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="招商银行" brief="尾号7785"/>
</ListItem>
</List>
<List type="twoline-side" >
<ListCell type="header-sp" slot="header">左右文字组合列表</ListCell>
<ListItem >
<ListCell title="标题一" brief="内容一" />
<ListCell type="extra" title="标题二" brief="内容二" slot="extra"/>
</ListItem>
<ListItem >
<ListCell title="标题一" brief="内容一" />
<ListCell type="extra" title="标题二" brief="内容二" slot="extra"/>
</ListItem>
<ListItem >
<ListCell type="thumb" src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png" />
<ListCell title="标题一" brief="内容一" />
<ListCell type="extra" title="标题二" brief="内容二" slot="extra"/>
</ListItem>
<ListItem >
<ListCell type="thumb" src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png" />
<ListCell title="标题一" brief="内容一" />
<ListCell type="extra" title="标题二" slot="extra"/>
</ListItem>
</List>
</div>
</template>
- 本页导读 (0)