分页／Pagination

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

用法

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

Class	描述
`.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>

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

文档

分页／Pagination

用法

对齐

上一页和下一页

pagination.md