Amaze UI

Pagination


分页组件,<ul> / <ol> 添加 .am-pagination class, 包含一系列 <li>

<li> 上添加状态 class:

基本样式

Copy
<ul class="am-pagination">
  <li class="am-disabled"><a href="#">&laquo;</a></li>
  <li class="am-active"><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">&raquo;</a></li>
</ul>


<ul class="am-pagination">
  <li><a href="">&laquo; Prev</a></li>
  <li><a href="">Next &raquo;</a></li>
</ul>
  • .am-disabled - 禁用(不可用)
  • .am-active - 激活

在线运行

对齐方式

默认为左对齐。

居中对齐

Copy
<ul class="am-pagination am-pagination-centered">
  <li class="am-disabled"><a href="#">&laquo;</a></li>
  <li class="am-active"><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">&raquo;</a></li>
</ul>

在默认样式的基础上添加 .am-pagination-centered class。

在线运行

右对齐

Copy
<ul class="am-pagination am-pagination-right">
  <li class="am-disabled"><a href="#">&laquo;</a></li>
  <li class="am-active"><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">&raquo;</a></li>
</ul>

在默认样式的基础上添加 .am-pagination-right class。

在线运行

左右分布

Copy
<ul class="am-pagination">
  <li class="am-pagination-prev"><a href="">&laquo; Prev</a></li>
  <li class="am-pagination-next"><a href="">Next &raquo;</a></li>
</ul>

添加 .am-pagination-prev.am-pagination-next<li>,创建一个仅包含 上一页下一页 的分页组件。

在线运行

结合图标使用

  • ...
Copy
<ul class="am-pagination">
  <li><a href=""><span class="am-icon-angle-double-left"></span></a></li>
  <li><span>...</span></li>
  <li><a href=""><span class="am-icon-angle-double-right"></span></a></li>
</ul>

将文字部分用图标替换即可。

在线运行

注意: <li> 里面的非链接文字需要使用 <span> 包裹。

Tips: 使用 MongoDB 的可以试试 mongoose-paginater