amazeui学习笔记--css(常用组件8)--列表list
一、总结
1、链接列表:就是多个链接在一起组成的列表, 使用 <ul>
结构嵌套链接列表,添加 .am-list
。还是ui包着li的形式。<ul class="am-list">里面是各种含着a标签的li</ul>
2、文字截断:在 <a>
上添加 .am-text-truncate
class 可以实现文字超出一行时截断为 ...
。这是在链接列表里面的文字截断。
<ul class="am-list"> <li><a href="#" class="am-text-truncate">每个人都有一个死角, 自己走不出来,别人也闯不进去。我把最深沉的秘密放在那里。每个人都有一道伤口, 或深或浅,盖上布,以为不存在。</a></li> </ul>
3、纯文字列表:就是不是链接,单纯的文字。在 .am-list
的基础上添加 .am-list-static
。<ul class="am-list am-list-static">里面li</ul>
4、列表边框:在容器上添加 .am-list-border
class。<ul class="am-list am-list-static am-list-border">
5、斑马纹:添加 .am-list-striped
class。<ul class="am-list am-list-static am-list-border am-list-striped">
6、添加小徽章(非常有用): 用span标签,在文字前面
1 <ul class="am-list am-list-static am-list-border"> 2 <li> 3 <span class="am-badge am-badge-success">YES</span> <span class="am-badge am-badge-danger">NO</span> 4 每个人都有一个死角, 自己走不出来,别人也闯不进去。</li> 5 </ul>
7、添加icon:<li><i class="am-icon-home am-icon-fw"></i>每个人都有一个死角, 自己走不出来,别人也闯不进去。</li>
二、列表list
List
基本样式
链接列表
使用 <ul>
结构嵌套链接列表,添加 .am-list
。
<ul class="am-list">
<li><a href="#">每个人都有一个死角, 自己走不出来,别人也闯不进去。</a></li> <li><a href="#">我把最深沉的秘密放在那里。</a></li> <li><a href="#">你不懂我,我不怪你。</a></li> <li><a href="#">每个人都有一道伤口, 或深或浅,盖上布,以为不存在。</a></li> </ul>
文字超出截断为「...」
在 <a>
上添加 .am-text-truncate
class 可以实现文字超出一行时截断为 ...
。
<ul class="am-list">
<li><a href="#" class="am-text-truncate">每个人都有一个死角, 自己走不出来,别人也闯不进去。我把最深沉的秘密放在那里。每个人都有一道伤口, 或深或浅,盖上布,以为不存在。</a></li> </ul>
纯文字列表
在 .am-list
的基础上添加 .am-list-static
。
- 每个人都有一个死角, 自己走不出来,别人也闯不进去。
- 我把最深沉的秘密放在那里。
- 你不懂我,我不怪你。
- 每个人都有一道伤口, 或深或浅,盖上布,以为不存在。
<ul class="am-list am-list-static">
<li>...</li> </ul>
样式变换
列表边框
在容器上添加 .am-list-border
class。
- 每个人都有一个死角, 自己走不出来,别人也闯不进去。
- 我把最深沉的秘密放在那里。
- 你不懂我,我不怪你。
- 每个人都有一道伤口, 或深或浅,盖上布,以为不存在。
<ul class="am-list am-list-static am-list-border">
<li>...</li> </ul> <ul class="am-list am-list-border"> <li>...</li> </ul>
斑马纹
添加 .am-list-striped
class。
- 每个人都有一个死角, 自己走不出来,别人也闯不进去。
- 我把最深沉的秘密放在那里。
- 你不懂我,我不怪你。
- 每个人都有一道伤口, 或深或浅,盖上布,以为不存在。
<ul class="am-list am-list-static am-list-border am-list-striped">
<li>...</li> </ul>
组合使用
添加 Badge
- YESNO每个人都有一个死角, 自己走不出来,别人也闯不进去。
- 17我把最深沉的秘密放在那里。
- 5你不懂我,我不怪你。
<ul class="am-list am-list-static am-list-border">
<li> <span class="am-badge am-badge-success">YES</span> <span class="am-badge am-badge-danger">NO</span> 每个人都有一个死角, 自己走不出来,别人也闯不进去。</li> </ul>
添加 ICON
<ul class="am-list am-list-static am-list-border">
<li> <i class="am-icon-home am-icon-fw"></i> 每个人都有一个死角, 自己走不出来,别人也闯不进去。</li> <li> <i class="am-icon-book am-icon-fw"></i> 我把最深沉的秘密放在那里。</li> <li><i class="am-icon-pencil am-icon-fw"></i>你不懂我,我不怪你。</li> </ul> <ul class="am-list am-list-border"> <li><a href="#"><i class="am-icon-home am-icon-fw"></i> 每个人都有一个死角, 自己走不出来,别人也闯不进去。</a></li> <li><a href="#"> <i class="am-icon-book am-icon-fw"></i> 我把最深沉的秘密放在那里。</a></li> <li><a href="#"><i class="am-icon-pencil am-icon-fw"></i>你不懂我,我不怪你。</a></li> </ul>
与 Panel 组合
见 Panel 组件。