メインコンテンツへスキップ

ドキュメント

ページネーション

ページ間をナビゲートするための見栄えの良いページネーションを簡単に作成できます。

使い方

ページネーションコンポーネントは、水平リストに並んで配置されたボタンのようなスタイルのリンクで構成されています。

クラス 説明
.uk-pagination ページネーションコンポーネントを定義するには、このクラスを<ul>要素に追加します。リスト内のページネーションアイテムとして<a>要素を使用します。
.uk-active アクティブ状態を適用するには、このクラスをリストアイテムに追加し、<a>要素の代わりに<span>を使用します。
.uk-disabled 無効状態を適用するには、このクラスをリストアイテムに追加し、<a>要素の代わりに<span>を使用します。 
<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>

前へ、次へ

前へボタンと次へボタンを適用するには、ページネーションアイテム内の<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-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属性。