分页

轻松创建一个美观的分页导航来浏览网页。

用法

分页组件由类似按钮风格的链接并排排列组成。

类 概述
.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 类到一个 &lt;li&gt; 元素，其向左或者向右对齐。

示例

Code.

<li class="uk-pagination-previous"><a href="">...</a></li>
<li class="uk-pagination-next"><a href="">...</a></li>

带图标的分页导航

使用 图标组件 中的图标增强分页导航效果。添加一个 .uk-icon-* 类到分页导航链接里的 &lt;i&gt; 或 &lt;span&gt; 元素中。

示例

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支持的列表视图中触发一个事件，动态地加载新的列表项。