amazeui学习笔记--css（常用组件11）--分页Pagination

amazeui学习笔记--css（常用组件11）--分页Pagination

一、总结

1、分页使用：还是ul包li的形式： 分页组件，<ul> / <ol> 添加 .am-pagination class， 包含一系列 <li>。

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

2、居中对齐：在默认样式的基础上添加 .am-pagination-centered class。<ul class="am-pagination am-pagination-centered">各种li</ul>

3、右对齐：在默认样式的基础上添加 .am-pagination-right class。

4、左右分布：添加 .am-pagination-prev 及 .am-pagination-next 到 <li>，创建一个仅包含 上一页 和 下一页 的分页组件。

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

5、结合图标使用：将文字部分用图标替换即可。 <li><a href=""><span  class="am-icon-angle-double-left"></span></a></li>

二、分页Pagination

Pagination

---

目录

• 基本样式
• 对齐方式
  • 居中对齐
  • 右对齐
• 左右分布
• 结合图标使用

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

在 <li> 上添加状态 class：

• .am-disabled - 禁用（不可用）
• .am-active - 激活

基本样式

 Copy

• «
• 1
• 2
• 3
• 4
• 5
• »

• « Prev
• Next »

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

<hr />

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

对齐方式

默认为左对齐。

居中对齐

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

 Copy

• «
• 1
• 2
• 3
• 4
• 5
• »

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

 Copy

• «
• 1
• 2
• 3
• 4
• 5
• »

<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-prev 及 .am-pagination-next 到 <li>，创建一个仅包含 上一页 和 下一页 的分页组件。

 Copy

• « Prev
• Next »

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

结合图标使用

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

 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。