跳到主要内容

文档

分页

轻松创建美观的分页来浏览页面。

用法

分页组件由按钮样式的链接组成，这些链接并排排列在水平列表中。

类 描述
.uk-pagination 将此 class 添加到 <ul> 元素以定义分页组件。在列表中使用 <a> 元素作为分页项目。
.uk-active 将此 class 添加到列表项以应用活动状态，并使用 <span> 而不是 <a> 元素。
.uk-disabled 将此 class 添加到列表项以应用禁用状态，并使用 <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，因此可以使用弹性布局组件轻松对齐导航。

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

上一页和下一页

要应用上一页和下一页按钮，请将 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>
<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>

上一页/下一页分页遵循按钮模式，并自动设置适当的 WAI-ARIA 角色、状态和属性。

国际化

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

键 默认 描述
label 下一页/上一页 aria-label 属性。