分页

轻松创建好看的页面分页。

用法

分页组件由按钮风格的链接组成，这些链接在水平列表中并排对齐。

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>

- 1
- ...
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- ...
- 20

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

- 1
- ...
- 5
- 6
- 7
- 8
- 1
- ...
- 5
- 6
- 7
- 8

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

- Previous
- Next

<ul class="uk-pagination">
    <li><a href="#"><span class="uk-margin-small-right" uk-pagination-previous></span> Previous</a></li>
    <li class="uk-margin-auto-left"><a href="#">Next <span class="uk-margin-small-left" uk-pagination-next></span></a></li>
</ul>