跳至主要內容

文件

分頁

輕鬆建立美觀的分頁，以瀏覽頁面。

用法

分頁元件由按鈕樣式的連結組成，這些連結在水平清單中並排對齊。

類別 描述
.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-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 角色、狀態和屬性。

國際化

分頁元件使用以下翻譯字串。深入瞭解翻譯元件。

金鑰 預設 描述
標籤 下一頁/上一頁 aria-label 屬性。