amazeui学习笔记--css（常用组件11）--分页Pagination
一、总结
1、分页使用：还是ul包li的形式： 分页组件，<ul> / <ol> 添加 .am-pagination class， 包含一系列 <li>。
1 <ul class="am-pagination"> 2 <li class="am-disabled"><a href="#">«</a></li> 3 <li class="am-active"><a href="#">1</a></li> 4 <li><a href="#">2</a></li> 5 <li><a href="#">3</a></li> 6 <li><a href="#">4</a></li> 7 <li><a href="#">5</a></li> 8 <li><a href="#">»</a></li> 9 </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="">« Prev</a></li> <li class="am-pagination-next"><a href="">Next »</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- 激活
基本样式
<ul class="am-pagination">
<li class="am-disabled"><a href="#">«</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="#">»</a></li>
</ul>
<hr />
<ul class="am-pagination">
<li><a href="">« Prev</a></li>
<li><a href="">Next »</a></li>
</ul>对齐方式
默认为左对齐。
居中对齐
在默认样式的基础上添加 .am-pagination-centered class。
<ul class="am-pagination am-pagination-centered">
<li class="am-disabled"><a href="#">«</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="#">»</a></li>
</ul>右对齐
在默认样式的基础上添加 .am-pagination-right class。
<ul class="am-pagination am-pagination-right">
<li class="am-disabled"><a href="#">«</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="#">»</a></li>
</ul>左右分布
添加 .am-pagination-prev 及 .am-pagination-next 到 <li>，创建一个仅包含 上一页 和 下一页 的分页组件。
<ul class="am-pagination">
<li class="am-pagination-prev"><a href="">« Prev</a></li>
<li class="am-pagination-next"><a href="">Next »</a></li>
</ul>结合图标使用
将文字部分用图标替换即可。
- ...
<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。