跳到主要内容

文档

Pagination

轻松创建美观的分页，用于在页面之间导航。

用法

分页（Pagination）组件由外观类似按钮的链接组成，它们并排对齐在一个水平列表中。

类 说明
.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>
<nav aria-label="Pagination">
    <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 aria-current="page">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>
</nav>

对齐

分页组件使用 flexbox，因此可以借助 Flex 组件轻松对齐导航。

<ul class="uk-pagination uk-flex-center">…</ul>
<nav aria-label="Pagination">
    <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 aria-current="page">7</span></li>
        <li><a href="#">8</a></li>
        <li><a href="#"><span uk-pagination-next></span></a></li>
    </ul>
</nav>

<nav aria-label="Pagination">
    <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 aria-current="page">7</span></li>
        <li><a href="#">8</a></li>
        <li><a href="#"><span uk-pagination-next></span></a></li>
    </ul>
</nav>

上一页与下一页

要应用上一页和下一页按钮，请为分页项内的 <span> 元素添加 uk-pagination-previous 或 uk-pagination-next 属性。

<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>
<nav>
    <ul class="uk-pagination">
        <li><a href="#"><span class="uk-margin-xsmall-right" uk-pagination-previous></span> Previous</a></li>
        <li class="uk-margin-auto-left"><a href="#">Next <span class="uk-margin-xsmall-left" uk-pagination-next></span></a></li>
    </ul>
</nav>

可访问性

为分页组件设置恰当的 WAI-ARIA 角色、状态和属性。

<nav aria-label="Pagination">
    <ul class="uk-pagination">…</ul>
</nav>

上一页/下一页分页项会通过 aria-label 属性自动获得可访问的标签，并且在跳转到其他页面时仍然是链接。页面内的操作应使用按钮，而不是用它们做导航。

国际化

分页组件使用以下翻译字符串。了解更多关于翻译组件的内容。

Key 默认值 说明
label Next/Previous page aria-label 属性。