component-paginate

echo-paginate

ページネーション(ページ分割ナビゲーション)を前提とした外観に変更する。.echo-nav を包括する。
すべての .echo-nav-label (リンク)が正方形となる。

.echo-nav-item.ellipsis は省略記号とみなされ、これ以外のすべてのリンクが正方形となる。

コンポーネント内の .echo-nav-item.prev , .echo-nav-item.next は前後移動リンクとみなされ、シェブロンを表示する。

最初のページ、最後のページへのリンクスタイルには対応していないため、任意で追加すること。

Sassを使用している場合は、/_scss/_config_advance.scss の以下の変数でスタイルを変更できる。

変数名スタイル初期値
$paginate-border-widthボタンの枠線の太さ0
$paginate-gutterボタン間の余白0
$paginate-prevクラス名:前ページprev
$paginate-nextクラス名:次ページnext
$paginate-ellipsisクラス名:省略記号ellipsis
$paginate-currentクラス名:現在のページis-current

一般的なページネーション

.echo-nav-smを付与した例

.echo-nav-lgを付与した例

.echo-nav-fixedでサイズを固定した例

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

全体の幅が一般的なスマートフォンの画面領域を超えてしまうので、 .echo-nav-sm を付与して縮小する必要がある。

.echo-nav-inverseを併用した例