跳至主要内容

文档

分页

轻松创建美观且易于使用的分页功能来浏览页面。

用法

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

类 描述
.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>

对齐

分页组件使用弹性盒子，因此导航可以轻松地与 弹性盒子组件 对齐。

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

无障碍性

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

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

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

国际化

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

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