分页
轻松创建好看的页面分页。
用法
分页组件由按钮风格的链接组成，这些链接在水平列表中并排对齐。
| Class | Description |
|---|---|
.uk-pagination |
添加到<ul> 元素中定义分页组件。使用<a> 元素作为列表中的分页项。 |
.uk-active |
添加到列表项应用活动状态，并使用<span>代替 <a> 元素。 |
.uk-disabled |
添加到列表项应用禁用状态，并使用<span>代替 <a> 元素。 |
<ul class="uk-pagination">
<li><a href=""></a></li>
<li class="uk-active"><span></span></li>
<li class="uk-disabled"><span></span></li>
</ul>-
<ul class="uk-pagination" uk-margin> <li><a href="#"><span uk-pagination-previous></span></a></li> <li><a href="#">1</a></li> <li class="uk-disabled"><span>...</span></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li class="uk-active"><span>7</span></li> <li><a href="#">8</a></li> <li><a href="#">9</a></li> <li><a href="#">10</a></li> <li class="uk-disabled"><span>...</span></li> <li><a href="#">20</a></li> <li><a href="#"><span uk-pagination-next></span></a></li> </ul>
对齐
分页组件使用flexbox，可以使用Flex 组件来处理对齐效果。
<ul class="uk-pagination uk-flex-center">...</ul>-
<ul class="uk-pagination uk-flex-center" uk-margin> <li><a href="#"><span uk-pagination-previous></span></a></li> <li><a href="#">1</a></li> <li class="uk-disabled"><span>...</span></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li class="uk-active"><span>7</span></li> <li><a href="#">8</a></li> <li><a href="#"><span uk-pagination-next></span></a></li> </ul> <ul class="uk-pagination uk-flex-right uk-margin-medium-top" uk-margin> <li><a href="#"><span uk-pagination-previous></span></a></li> <li><a href="#">1</a></li> <li class="uk-disabled"><span>...</span></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li class="uk-active"><span>7</span></li> <li><a href="#">8</a></li> <li><a href="#"><span uk-pagination-next></span></a></li> </ul>
上一页和下一页
要使用上一页和下一页按钮，请将uk-pagination-previous 或 uk-pagination-next 属性添加到分页项内的<span>元素。
<ul class="uk-pagination">
<li><a href=""><span uk-pagination-previous></span></a></li>
<li><a href=""><span uk-pagination-next></span></a></li>
</ul>