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を併用した例