List 列表
最基础的列表展示,可承载文字、列表、图片、段落,常用于后台数据展示页面。
基础用法
设置属性 size
可以显示三种不同尺寸的列表。
可以设置 header
或 footer
来自定义列表头部或尾部。
默认尺寸:
小尺寸:
大尺寸:
小尺寸:
大尺寸:
带有其它操作的简单列表
带有图标、标题、描述的简单列表。
也可以带有列表操作组。
竖排列表样式
设置属性 vertical
为 true
可实现竖排列表样式。
List Props
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
vertical | 是否竖排 | Boolean | - | false |
header | 列表头部 | String | - | - |
footer | 列表底部 | String | - | - |
border | 是否有边框 | Boolean | - | false |
split | 是否有分割线 | Boolean | - | true |
size | 列表大小 | String | small/medium/large | medium |
List Slots
名称 | 说明 |
---|---|
header | 自定义列表头部 |
default | 用来放置 list-item 元素 |
footer | 自定义列表底部 |
ListItem Props
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
avatar | 头像连接 | String | - | false |
header | 标题内容 | String | - | - |
description | 表述内容 | String | - | - |
ListItem Slots
名称 | 说明 |
---|---|
default | 自定义内容部分 |
header | 自定义列表头部 |
description | 自定义描述区域 |
extra | 自定义额外的内容,仅当List的 vertical 为 true是可用 |
action | 自定义操作区域 |