分页
轻松创建一个美观的分页导航来浏览网页。
用法
分页组件由类似按钮风格的链接并排排列组成。
| 类 | 概述 |
|---|---|
.uk-pagination |
将这个类添加到一个 <ul> 元素，定义分页导航组件。使用 <a>
元素作为分页导航列表中的项目。 |
.uk-active |
将这个类添加到一个列表项，对其应用选中的状态，使用 <span> 替代 <a>
元素。 |
.uk-disabled |
将这个类添加到一个列表项，对其应用禁用状态，使用 <span> 替代 <a> 元素。
|
要应用一个无样式的省略号，只需使用 <span> 来替代 <a> 元素。
示例
Code.
<ul class="uk-pagination">
<li><a href="">...</a></li>
<li class="uk-active"><span>...</span></li>
<li class="uk-disabled"><span>...</span></li>
<li><span>...</span></li>
</ul>对齐修饰类
向页码添加 .uk-pagination-left 或 .uk-pagination-right 类使其向左或者向右对齐。
示例
Code.
<ul class="uk-pagination uk-pagination-left">
<li>...</li>
</ul><ul class="uk-pagination uk-pagination-right">
<li>...</li>
</ul>上一页与下一页
创建一个简单上一页和下一页分页导航是非常容易的。只需添加 .uk-pagination-previous 或
.uk-pagination-next 类到一个 <li> 元素，其向左或者向右对齐。
示例
Code.
<li class="uk-pagination-previous"><a href="">...</a></li>
<li class="uk-pagination-next"><a href="">...</a></li>带图标的分页导航
使用 图标组件 中的图标增强分页导航效果。添加一个 .uk-icon-* 类到分页导航链接里的
<i> 或 <span> 元素中。
示例
Code.
<li><a href=""><i class="uk-icon-angle-double-left"></i></a></li>
<li><a href=""><i class="uk-icon-angle-double-right"></i></a></li>JavaScript
你可以应用附加组件中的分页组件来自动计算页码，例如在由Ajax支持的列表视图中触发一个事件，动态地加载新的列表项。
