• 组件
  • 布局与其它

列表

单个连续模块垂直排列，显示当前的内容、状态和可进行的操作。eg：联系人列表。

规则

  • 一般由主要信息、主要操作、次要信息、次要操作组成。
  • 主要信息和主要操作放在列表的左边，次要信息和次要操作放在列表的右边。
  • 推荐使用ul,li标签。为ul添加 .list-ord列表组件基于flex布局开f发

代码演示

列表

基本情况：

  • 文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行
  • 文字超长文字超长文字超长隐藏藏藏藏藏藏藏藏藏藏藏藏藏<
  • 标题文字点击无反馈，文字超长则隐藏藏藏藏藏藏藏藏藏藏藏藏藏

操作型列表：

阅读列表：

展示型列表

  • 项目标题
    展示型列表
  • 项目标题
    展示型列表
  • 项目标题
    展示型列表

次级展示型列表:

  • 就诊卡卡号：370201032801320476
  • 门诊号：020087418
  • 流水号：27839554
  • 开单时间：2016-10-10 00:00:00
  • 支付时间：2016-10-10 10:01:36

关于图文结合:

  • 带个小图标
  • 小图标＋箭头向右
  • 标题文本
    辅助文字内容
    12:30
  • 标题文本溢出怎么办，溢出截断溢出怎么办，溢出截断
    辅助文字内容溢出怎么办，溢出截断溢出怎么办，溢出截断
    12:30
  • 标题文本
    文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行
  • 加载更多
基本情况

包括文字溢出的处理

为li添加 .list-nowrap 文字溢出隐藏。需要注意的是，需要为隐藏的子模块添加.txt-nowrap

<p class="list-header">列表头</p>
<ul class="list-ord">
	<li class="list-item">基本情况：</li>
	<li class="list-item">
		<div class="list-content">文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行</div>
	</li>
	<li class="list-item list-nowrap">
		<div class="list-content">文字超长文字超长文字超长隐藏藏藏藏藏藏藏藏藏藏藏藏藏<</div>
	</li>
	<li class="list-item list-nowrap">
		<div class="list-content">
			<div class="list-title txt-nowrap">标题文字点击无反馈，文字超长则隐藏藏藏藏藏藏藏藏藏藏藏藏藏</div>

		</div>
	</li>
	<li class="list-item ">
		<div class="list-content">
			<a class="txt-prompt list-brief">加载更多</a>
		</div>
	</li>
</ul>
操作型列表

包括辅助信息，项目标题的，对齐方式，带箭头的列表。

默认情况下模块顶对齐，你可以为li添加.list-item-middel来等到一个居中对齐的列表项。

在li里添加a标签，并为a标签添加.txt-arrowlink .list-link-wrapper来得到一个带箭头的列表。

<p class="list-header">列表头</p>
<ul class="list-ord">
	<li class="list-item ">
		<div class="list-content">
			<div class="list-title">标题文字</div>
			<div class="list-brief ">辅助文字内容</div>
		</div>
	</li>
	<li class="list-item ">
		<a class="txt-arrowlink list-link-wrapper">
			<div class="list-content">
				<div class="list-title">标题文字－可操作带箭头</div>
				<div class="list-brief ">辅助文字内容</div>
			</div>
		</a>
	</li>
	<li class="list-item ">
		<div class="list-content txt-nowrap ">
			<div class="list-title txt-nowrap">标题文字</div>
		</div>
		<div class="list-extra" >说明内容</div>
	</li>
	<li class="list-item  ">
		<a class="txt-arrowlink list-link-wrapper" >
			<div class="list-content" >
				<div class="list-title ">标题文字</div>
				<div class="list-brief txt-nowrap">辅助文字内容顶对齐</div>
			</div>
			<div class="list-extra" >顶对齐</div>
		</a>
	</li>
	<li class="list-item list-item-middel ">
		<a class="txt-arrowlink list-link-wrapper" >
			<div class="list-content" >
				<div class="list-title txt-nowrap">标题文字</div>
				<div class="list-brief ">辅助文字内容</div>
			</div>
			<div class="list-extra" >居中对齐</div>
		</a>
	</li>
	<li class="list-item  list-nowrap">
		<a class="txt-arrowlink list-link-wrapper" >
			<div class="list-content" >
				<div class="list-title ">标题文字</div>
				<div class="list-brief txt-nowrap">辅助文字内容超出隐藏辅助文字内容超出隐藏辅助文字内容超出隐藏辅助文字内容超出隐藏</div>
			</div>
			<div class="list-extra" >顶对齐</div>
		</a>
	</li>
	<li class="list-item list-item-middel list-nowrap">
		<a class="txt-arrowlink list-link-wrapper" >
			<div class="list-content" >
				<div class="list-title txt-nowrap">标题文字－可操作带箭头超出隐藏标题文字－可操作带箭头超出隐藏</div>
				<div class="list-brief ">辅助文字内容</div>
			</div>
			<div class="list-extra" >居中对齐</div>
		</a>
	</li>
</ul>
阅读列表

左右结构，左边的项目标题原始width为80px，不建议超出5汉字，如有需求请显示声明width。

<p class="list-header">列表头</p>
<ul class="list-ord">	
	<li class="list-item  ">
		<a class="txt-arrowlink list-link-wrapper">
			<div class="list-brief-title">项目标题</div>
			<div class="list-content ">顶对齐，溢出折行顶对齐，溢出折行顶对齐，溢出折行</div>
		</a>
	</li>
	<li class="list-item  ">
		<a class="txt-arrowlink list-link-wrapper">
			<div class="list-brief-title">项目标题</div>
			<div class="list-content txt-nowrap">溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏</div>
		</a>
	</li>
	<li class="list-item  ">
		<div class="list-brief-title">项目标题</div>
		<div class="list-content txt-nowrap">内容文字</div>
	</li>
</ul>
展示型列表

列表项无边框线隔出，也无箭头链接，一般只用于数据的展示。

<p class="list-header">列表头</p>
<ul class="list-ord">
	<li class="list-item  list-item-noborder">
		<div class="list-brief-title">项目标题</div>
		<div class="list-content txt-nowrap">展示型列表</div>
	</li>
	<li class="list-item  list-item-noborder">
		<div class="list-brief-title">项目标题</div>
		<div class="list-content txt-nowrap">展示型列表</div>
	</li>
	<li class="list-item  list-item-noborder">
		<div class="list-brief-title">项目标题</div>
		<div class="list-content txt-nowrap">展示型列表</div>
	</li>
</ul>


<p>次级展示型列表</p>
<ul class="list-ord">
	<li class="list-item  list-item-small">
		<div class="list-brief">就诊卡卡号：370201032801320476</div>
	</li>
	<li class="list-item  list-item-small">
		<div class="list-brief">门诊号：020087418</div>
	</li>
	<li class="list-item  list-item-small">
		<div class="list-brief">流水号：27839554</div>
	</li>
	<li class="list-item  list-item-small">
		<div class="list-brief">开单时间：2016-10-10 00:00:00</div>
	</li>
	<li class="list-item  list-item-small">
		<div class="list-brief">支付时间：2016-10-10 10:01:36</div>
	</li>
</ul>
<br>
图文结合列表

为你们提供三种尺寸的图文列表

大、中、小图标对应啊：list-icon-lg list-icon list-icon-sm你可以使用img标签，也可以使用smart为你提供的 icon

<p class="list-header">列表头</p>
<ul class="list-ord">
	<li class="list-item ">
		<img src="https://image.yuantutech.com/i4/cafad83e314e9fb646211d779686bf72-73-73.png"  class="list-icon-sm">
		<div class="list-content">
			<div class="list-title">带个小图标</div>
		</div>
	</li>
	<li class="list-item ">
		<a class="txt-arrowlink list-link-wrapper" >
			<img src="https://image.yuantutech.com/i4/cafad83e314e9fb646211d779686bf72-73-73.png"  class="list-icon-sm ">
			<div class="list-content" >
				<div class="list-title ">小图标＋箭头向右</div>
			</div>
		</a>
	</li>
	<li class="list-item ">
		<img src="https://image.yuantutech.com/i4/cafad83e314e9fb646211d779686bf72-73-73.png" class="list-icon">
		<div class="list-content">
			<div class="list-title">标题文本</div>
			<div class="list-brief ">辅助文字内容</div>
		</div>
		<div class="list-extra" >12:30</div>
	</li>
	<li class="list-item list-nowrap">
		<img src="https://image.yuantutech.com/i4/cafad83e314e9fb646211d779686bf72-73-73.png" class="list-icon">
		<div class="list-content">
			<div class="list-title txt-nowrap">标题文本溢出怎么办，溢出截断溢出怎么办，溢出截断</div>
			<div class="list-brief txt-nowrap">辅助文字内容溢出怎么办，溢出截断溢出怎么办，溢出截断</div>
		</div>
		<div class="list-extra" >12:30</div>
	</li>
	<li class="list-item ">
		<img src="https://image.yuantutech.com/i4/cafad83e314e9fb646211d779686bf72-73-73.png" class="list-icon-lg">
		<div class="list-content">
			<div class="list-title">标题文本</div>
			<div class="list-brief ">文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行</div>
		</div>
	</li>
</ul>
Inputitem 文本输入 Listview 长列表