component-pager | Style guide

ページネーション（ページ分割ナビゲーション）を前提とした外観に変更する。.m-nav を包括する。

コンポーネント内の .m-nav-item.prev , .m-nav-item.next は前後移動リンクとみなされる。
.m-nav-item.current は現在ページとみなされ、現在ページの a.m-nav-label が削除されるCMSにも対応する。
.m-nav-item.ellipsis は省略記号とみなされる。
最初のページ、最後のページへのリンクスタイルには対応していないため、任意で追加すること。

.prev, .next, .current, .ellipsis を変更したい場合は、 /_scss/_config_advance.scss の変数
$pager-prev, $pager-next, $pager-current, $pager-ellipsis を変更すること。

シンプルなページネーション

先頭・末尾・省略記号を含む

全体の幅が一般的なスマートフォンの画面幅を超えてしまうので、スマートフォンでも使用する場合はこれらを非表示にする必要がある。

現在ページのa要素が除去されるCMSの場合

.m-nav-inverseを併用した場合

<h3 class="u-text-lg">シンプルなページネーション</h3>
<div class="c-pager">
    <nav class="m-nav">
        <ul class="m-nav-list">
            <li class="m-nav-item prev">
                <a href="#" class="m-nav-label" aria-label="prev">
                    <i class="fas fa-angle-left" aria-hidden="true"></i>
                    <span class="u-sr">Previous</span>
                </a>
            </li>
            <li class="m-nav-item">
                <a href="#" class="m-nav-label">1</a>
            </li>
            <li class="m-nav-item is-current">
                <a href="#" class="m-nav-label">2</a>
            </li>
            <li class="m-nav-item">
                <a href="#" class="m-nav-label">3</a>
            </li>
            <li class="m-nav-item">
                <a href="#" class="m-nav-label">4</a>
            </li>
            <li class="m-nav-item">
                <a href="#" class="m-nav-label">5</a>
            </li>
            <li class="m-nav-item next">
                <a href="#" class="m-nav-label" aria-label="next">
                    <i class="fas fa-angle-right" aria-hidden="true"></i>
                    <span class="u-sr">Next</span>
                </a>
            </li>
        </ul><!-- /.nav-list -->
    </nav><!-- /.nav -->
</div><!-- /.pager -->

<h3 class="u-text-lg u-margin-top-lg">先頭・末尾・省略記号を含む</h3>
<p>全体の幅が一般的なスマートフォンの画面幅を超えてしまうので、スマートフォンでも使用する場合はこれらを非表示にする必要がある。</p>
<div class="c-pager">
    <nav class="m-nav">
        <ul class="m-nav-list">
            <li class="m-nav-item prev">
                <a href="#" class="m-nav-label" aria-label="prev">
                    <i class="fas fa-angle-left" aria-hidden="true"></i>
                    <span class="u-sr">Previous</span>
                </a>
            </li>
            <li class="m-nav-item u-hidden-xs-down">
                <a href="#" class="m-nav-label">1</a>
            </li>
            <li class="m-nav-item ellipsis u-hidden-xxs-down">…</li>
            <li class="m-nav-item">
                <a href="#" class="m-nav-label">6</a>
            </li>
            <li class="m-nav-item">
                <a href="#" class="m-nav-label">7</a>
            </li>
            <li class="m-nav-item is-current">
                <a href="#" class="m-nav-label">8</a>
            </li>
            <li class="m-nav-item">
                <a href="#" class="m-nav-label">9</a>
            </li>
            <li class="m-nav-item">
                <a href="#" class="m-nav-label">10</a>
            </li>
            <li class="m-nav-item ellipsis u-hidden-xxs-down">…</li>
            <li class="m-nav-item u-hidden-xs-down">
                <a href="#" class="m-nav-label">999</a>
            </li>
            <li class="m-nav-item next">
                <a href="#" class="m-nav-label" aria-label="next">
                    <i class="fas fa-angle-right" aria-hidden="true"></i>
                    <span class="u-sr">Next</span>
                </a>
            </li>
        </ul><!-- /.nav-list -->
    </nav><!-- /.nav -->
</div><!-- /.pager -->

<h3 class="u-text-lg u-margin-top-lg">現在ページのa要素が除去されるCMSの場合</h3>
<div class="c-pager">
    <nav class="m-nav">
        <ul class="m-nav-list">
            <li class="m-nav-item prev">
                <a href="#" class="m-nav-label" aria-label="prev">
                    <i class="fas fa-angle-left" aria-hidden="true"></i>
                    <span class="u-sr">Previous</span>
                </a>
            </li>
            <li class="m-nav-item">
                <a href="#" class="m-nav-label">1</a>
            </li>
            <li class="m-nav-item is-current">
                2
            </li>
            <li class="m-nav-item">
                <a href="#" class="m-nav-label">3</a>
            </li>
            <li class="m-nav-item">
                <a href="#" class="m-nav-label">4</a>
            </li>
            <li class="m-nav-item">
                <a href="#" class="m-nav-label">5</a>
            </li>
            <li class="m-nav-item next">
                <a href="#" class="m-nav-label" aria-label="next">
                    <i class="fas fa-angle-right" aria-hidden="true"></i>
                    <span class="u-sr">Next</span>
                </a>
            </li>
        </ul><!-- /.nav-list -->
    </nav><!-- /.nav -->
</div><!-- /.pager -->

<h3 class="u-text-lg u-margin-top-lg">.m-nav-inverseを併用した場合</h3>
<div class="u-bg-first">
    <div class="c-pager">
        <nav class="m-nav m-nav-inverse">
            <ul class="m-nav-list">
                <li class="m-nav-item prev">
                    <a href="#" class="m-nav-label" aria-label="prev">
                        <i class="fas fa-angle-left" aria-hidden="true"></i>
                        <span class="u-sr">Previous</span>
                    </a>
                </li>
                <li class="m-nav-item">
                    <a href="#" class="m-nav-label">1</a>
                </li>
                <li class="m-nav-item ellipsis">…</li>
                <li class="m-nav-item">
                    <a href="#" class="m-nav-label">6</a>
                </li>
                <li class="m-nav-item">
                    <a href="#" class="m-nav-label">7</a>
                </li>
                <li class="m-nav-item is-current">
                    <a href="#" class="m-nav-label">8</a>
                </li>
                <li class="m-nav-item">
                    <a href="#" class="m-nav-label">9</a>
                </li>
                <li class="m-nav-item">
                    <a href="#" class="m-nav-label">10</a>
                </li>
                <li class="m-nav-item ellipsis">…</li>
                <li class="m-nav-item">
                    <a href="#" class="m-nav-label">999</a>
                </li>
                <li class="m-nav-item next">
                    <a href="#" class="m-nav-label" aria-label="next">
                        <i class="fas fa-angle-right" aria-hidden="true"></i>
                        <span class="u-sr">Next</span>
                    </a>
                </li>
            </ul><!-- /.nav-list -->
        </nav><!-- /.nav -->
    </div><!-- /.pager -->
</div>

nav-links(WordPress)

WordPressのthe_posts_pagination関数が生成するページネーションで、デフォルトと同様の外観を再現する。反転には対応していない。

前へ 1 2 3 4 5 次へ

<div class="nav-links"><a class="prev page-numbers" href="#">前へ</a>
<a class="page-numbers" href="#">1</a>
<a class="page-numbers" href="#">2</a>
<span aria-current="page" class="page-numbers current">3</span>
<a class="page-numbers" href="#">4</a>
<a class="page-numbers" href="#">5</a>
<a class="next page-numbers" href="#">次へ</a></div>