List 列表
最基础的列表展示,可承载文字、列表、图片、段落,常用于后台数据展示页面。 API文档 组件问题反馈和讨论不同尺寸 #
最简单的列表有大、中(默认)、小三种尺寸,nv-list 为中尺寸(默认)的样式,创建不同尺寸的列表,只需添加 nv-list-sm (小)、nv-list-lg (大);列表分为三部分:表头 nv-list-header 、表内容区 nv-list-content 、表尾 nv-list-footer ;其中表内容区每一行 nv-list-item 。
<code>
Default
Header
Do one thing at a time, and do well
Between the cup and the lip a morsel may slip
By reading we enrich the mind; by conversation we polish it.
Small
Header
Do one thing at a time, and do well
Between the cup and the lip a morsel may slip
By reading we enrich the mind; by conversation we polish it.
Large
Header
Do one thing at a time, and do well
Between the cup and the lip a morsel may slip
By reading we enrich the mind; by conversation we polish it.
基本样式 #
创建最基本的列表样式,只需添加 nv-list-base 样式,如需去掉列表的外边框,则删除 nv-list-border 即可。<code>
带有操作的列表 #
创建带有操作的列表和基础列表类同,只是行间多添加了一个操作列标签,示例中为 ul 标签,并给标签添加 nv-list-item-action 即可。<code>
显示代码
可加载的列表 #
创建可加载更多的列表,只需添加 nv-list-loading 样式;同时,需注意添加底部加载按钮<code>
显示代码
多栏式列表 #
创建多栏式列表,只需添加 nv-list-columns 样式,行内容可为1栏,2栏,3栏……,本示例为3栏效果,具体分栏可参考 栅格grid 布局;<code>
Name
Andy Wang
Contact
18810779876
Time
2018-02-02 00:00:00
ID
000001
Systerm
Android
Resolution
1080*1920
Tag
TagA