amazeui学习笔记--css（常用组件8）--列表list

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标签，在文字前面

<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>

7、添加icon：<li><i class="am-icon-home am-icon-fw"></i>每个人都有一个死角， 自己走不出来，别人也闯不进去。</li>

二、列表list

List

---

目录

• 基本样式
  • 链接列表
  • 文字超出截断为「...」
  • 纯文字列表
• 样式变换
  • 列表边框
  • 斑马纹
• 组合使用
  • 添加 Badge
  • 添加 ICON
  • 与 Panel 组合

基本样式

链接列表

使用 <ul> 结构嵌套链接列表，添加 .am-list。

 Copy

• 每个人都有一个死角， 自己走不出来，别人也闯不进去。
• 我把最深沉的秘密放在那里。
• 你不懂我，我不怪你。
• 每个人都有一道伤口， 或深或浅，盖上布，以为不存在。

<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 可以实现文字超出一行时截断为 ...。

 Copy

• 每个人都有一个死角， 自己走不出来，别人也闯不进去。我把最深沉的秘密放在那里。每个人都有一道伤口， 或深或浅，盖上布，以为不存在。

<ul class="am-list">
  <li><a href="#" class="am-text-truncate">每个人都有一个死角， 自己走不出来，别人也闯不进去。我把最深沉的秘密放在那里。每个人都有一道伤口， 或深或浅，盖上布，以为不存在。</a></li>
</ul>

纯文字列表

在 .am-list 的基础上添加 .am-list-static。

 Copy

• 每个人都有一个死角， 自己走不出来，别人也闯不进去。
• 我把最深沉的秘密放在那里。
• 你不懂我，我不怪你。
• 每个人都有一道伤口， 或深或浅，盖上布，以为不存在。

<ul class="am-list am-list-static">
  <li>...</li>
</ul>

样式变换

列表边框

在容器上添加 .am-list-border class。

 Copy

• 每个人都有一个死角， 自己走不出来，别人也闯不进去。
• 我把最深沉的秘密放在那里。
• 你不懂我，我不怪你。
• 每个人都有一道伤口， 或深或浅，盖上布，以为不存在。

• 每个人都有一个死角， 自己走不出来，别人也闯不进去。
• 我把最深沉的秘密放在那里。
• 你不懂我，我不怪你。
• 每个人都有一道伤口， 或深或浅，盖上布，以为不存在。

<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。

 Copy

• 每个人都有一个死角， 自己走不出来，别人也闯不进去。
• 我把最深沉的秘密放在那里。
• 你不懂我，我不怪你。
• 每个人都有一道伤口， 或深或浅，盖上布，以为不存在。

<ul class="am-list am-list-static am-list-border am-list-striped">
  <li>...</li>
</ul>

组合使用

添加 Badge

 Copy

• 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

 Copy

•  每个人都有一个死角， 自己走不出来，别人也闯不进去。
•  我把最深沉的秘密放在那里。
• 你不懂我，我不怪你。

•  每个人都有一个死角， 自己走不出来，别人也闯不进去。
•  我把最深沉的秘密放在那里。
• 你不懂我，我不怪你。

<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 组件。