Amaze UI

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>

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

在线运行

文字超出截断为「...」

Copy
<ul class="am-list">
  <li><a href="#" class="am-text-truncate">大江东去,浪淘尽,千古风流人物。故垒西边,人道是,三国周郎赤壁。乱石穿空,惊涛拍岸,卷起千堆雪。江山如画,一时多少豪杰。遥想公瑾当年,小乔初嫁了,雄姿英发。羽扇纶巾,谈笑间,樯橹灰飞烟灭。</a></li>
</ul>

<a> 上添加 .am-text-truncate class 可以实现文字超出一行时截断为 ...

在线运行

纯文字列表

  • 大江东去,浪淘尽,千古风流人物。
  • 故垒西边,人道是,三国周郎赤壁。
  • 乱石穿空,惊涛拍岸,卷起千堆雪。
  • 江山如画,一时多少豪杰。
Copy
<ul class="am-list am-list-static">
  <li>大江东去,浪淘尽,千古风流人物。</li>
  <li>故垒西边,人道是,三国周郎赤壁。</li>
  <li>乱石穿空,惊涛拍岸,卷起千堆雪。</li>
  <li>江山如画,一时多少豪杰。</li>
</ul>

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

在线运行

样式变换

列表边框

  • 大江东去,浪淘尽,千古风流人物。
  • 故垒西边,人道是,三国周郎赤壁。
  • 乱石穿空,惊涛拍岸,卷起千堆雪。
  • 江山如画,一时多少豪杰。
Copy
<ul class="am-list am-list-static am-list-border">
  <li>大江东去,浪淘尽,千古风流人物。</li>
  <li>故垒西边,人道是,三国周郎赤壁。</li>
  <li>乱石穿空,惊涛拍岸,卷起千堆雪。</li>
  <li>江山如画,一时多少豪杰。</li>
</ul>

<ul class="am-list am-list-border">
  <li><a href="#">大江东去,浪淘尽,千古风流人物。</a></li>
  <li><a href="#">故垒西边,人道是,三国周郎赤壁。</a></li>
  <li><a href="#">乱石穿空,惊涛拍岸,卷起千堆雪。</a></li>
  <li><a href="#">江山如画,一时多少豪杰。</a></li>
</ul>

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

在线运行

斑马纹

  • 大江东去,浪淘尽,千古风流人物。
  • 故垒西边,人道是,三国周郎赤壁。
  • 乱石穿空,惊涛拍岸,卷起千堆雪。
  • 江山如画,一时多少豪杰。
Copy
<ul class="am-list am-list-static am-list-border am-list-striped">
  <li>大江东去,浪淘尽,千古风流人物。</li>
  <li>故垒西边,人道是,三国周郎赤壁。</li>
  <li>乱石穿空,惊涛拍岸,卷起千堆雪。</li>
  <li>江山如画,一时多少豪杰。</li>
</ul>

添加 .am-list-striped class。

在线运行

组合使用

添加 Badge

  • YES NO 大江东去,浪淘尽,千古风流人物。
  • 17 故垒西边,人道是,三国周郎赤壁。
  • 5乱石穿空,惊涛拍岸,卷起千堆雪。
Copy
<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>
  <li>
    <span class="am-badge">17</span>
    故垒西边,人道是,三国周郎赤壁。</li>
  <li><span class="am-badge">5</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 组件