宫格列表:
{{ item.badge }}
{{ item.name }}
外部容器添加 class="cu-list grid col-*" 并将*替换为列数(一般为3~5),内部容器添加 class="cu-item";
外部容器添加类名 no-border 即可设为无边框宫格
菜单列表:
定制内容的列表项
我是右侧的文字~
我是按钮
标签1
标签2
标签3
多行列表项
我是Tips文字
列表外侧使用 l-list 标签,添加 card 属性转为卡片轮廓列表;列表项使用 l-list-item 标签; 列表项添加 arrow
属性可以设置箭头; 列表项可以添加以下属性:title、action,分别表示列表项左侧标题、列表项右侧内容;
默认插槽的内容将渲染为列表项的 title 标题内容;名为 action 的插槽内容渲染到列表项右侧; 名为 extra
的插槽内容将渲染到列表项的标题下方
消息列表:
5
王小明
新消息
我在
苏州市
在 l-list 列表标签上添加 message 属性即可将列表设为消息列表;列表项仍是 l-list-item 标签;
标签可以设置以下属性:avatar、title、extra、time、tips;
这些属性依次表示:头像地址、消息标题、消息内容、发送时间、消息额外提示(显示在时间下面); 其中
avatar、title、extra、time、tips 属性的内容均可使用同名的插槽来渲染