ダウンロード

ここから始める

機能

Sassツール

カスタマイズ

CSSライブラリ

CSSヘルパー

スポンサー

Password.link

ページネーション

レスポンシブで使いやすく、柔軟なページネーション

ページネーションコンポーネントは、いくつかの要素で構成されています。

  • 増分ナビゲーション用のpagination-previousとpagination-next
  • ページ項目を表示するpagination-list
    • ページ番号用のpagination-link
    • 範囲区切り用のpagination-ellipsis

すべての要素はオプションであるため、必要に応じてページネーションを構成できます。

例

HTML 

<nav class="pagination" role="navigation" aria-label="pagination">
  <a href="#" class="pagination-previous">Previous</a>
  <a href="#" class="pagination-next">Next page</a>
  <ul class="pagination-list">
    <li>
      <a href="#" class="pagination-link" aria-label="Goto page 1">1</a>
    </li>
    <li>
      <span class="pagination-ellipsis">&hellip;</span>
    </li>
    <li>
      <a href="#" class="pagination-link" aria-label="Goto page 45">45</a>
    </li>
    <li>
      <a
        class="pagination-link is-current"
        aria-label="Page 46"
        aria-current="page"
        >46</a
      >
    </li>
    <li>
      <a href="#" class="pagination-link" aria-label="Goto page 47">47</a>
    </li>
    <li>
      <span class="pagination-ellipsis">&hellip;</span>
    </li>
    <li>
      <a href="#" class="pagination-link" aria-label="Goto page 86">86</a>
    </li>
  </ul>
</nav>

非アクティブなリンクを無効にしたり、利用可能なページ番号の量を変更したりできます。

例

HTML 

<nav class="pagination" role="navigation" aria-label="pagination">
  <a class="pagination-previous is-disabled" title="This is the first page"
    >Previous</a
  >
  <a href="#" class="pagination-next">Next page</a>
  <ul class="pagination-list">
    <li>
      <a
        class="pagination-link is-current"
        aria-label="Page 1"
        aria-current="page"
        >1</a
      >
    </li>
    <li>
      <a href="#" class="pagination-link" aria-label="Goto page 2">2</a>
    </li>
    <li>
      <a href="#" class="pagination-link" aria-label="Goto page 3">3</a>
    </li>
  </ul>
</nav>

デフォルトでは、タブレットでは、リストが左側に、前後のボタンが右側に配置されます。ただし、is-centeredおよびis-right修飾子を使用すると、これらの要素の順序を変更できます。

例

HTML 

<nav class="pagination is-centered" role="navigation" aria-label="pagination">
  <a href="#" class="pagination-previous">Previous</a>
  <a href="#" class="pagination-next">Next page</a>
  <ul class="pagination-list">
    <li><a href="#" class="pagination-link" aria-label="Goto page 1">1</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a href="#" class="pagination-link" aria-label="Goto page 45">45</a></li>
    <li>
      <a
        class="pagination-link is-current"
        aria-label="Page 46"
        aria-current="page"
        >46</a
      >
    </li>
    <li><a href="#" class="pagination-link" aria-label="Goto page 47">47</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a href="#" class="pagination-link" aria-label="Goto page 86">86</a></li>
  </ul>
</nav>

例

HTML 

<nav class="pagination is-right" role="navigation" aria-label="pagination">
  <a href="#" class="pagination-previous">Previous</a>
  <a href="#" class="pagination-next">Next page</a>
  <ul class="pagination-list">
    <li><a href="#" class="pagination-link" aria-label="Goto page 1">1</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a href="#" class="pagination-link" aria-label="Goto page 45">45</a></li>
    <li>
      <a
        class="pagination-link is-current"
        aria-label="Page 46"
        aria-current="page"
        >46</a
      >
    </li>
    <li><a href="#" class="pagination-link" aria-label="Goto page 47">47</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a href="#" class="pagination-link" aria-label="Goto page 86">86</a></li>
  </ul>
</nav>

スタイル #

丸みを帯びたページネーション項目にするには、is-rounded修飾子を追加します。

例

HTML 

<nav class="pagination is-rounded" role="navigation" aria-label="pagination">
  <a href="#" class="pagination-previous">Previous</a>
  <a href="#" class="pagination-next">Next page</a>
  <ul class="pagination-list">
    <li><a href="#" class="pagination-link" aria-label="Goto page 1">1</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a href="#" class="pagination-link" aria-label="Goto page 45">45</a></li>
    <li>
      <a
        class="pagination-link is-current"
        aria-label="Page 46"
        aria-current="page"
        >46</a
      >
    </li>
    <li><a href="#" class="pagination-link" aria-label="Goto page 47">47</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a href="#" class="pagination-link" aria-label="Goto page 86">86</a></li>
  </ul>
</nav>

サイズ #

ページネーションには3つの追加サイズがあります。
paginationコンポーネントに修飾子is-small、is-medium、またはis-largeを追加するだけで済みます。

例

HTML 

<nav class="pagination is-small" role="navigation" aria-label="pagination">
  <a href="#" class="pagination-previous">Previous</a>
  <a href="#" class="pagination-next">Next page</a>
  <ul class="pagination-list">
    <li><a href="#" class="pagination-link" aria-label="Goto page 1">1</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a href="#" class="pagination-link" aria-label="Goto page 45">45</a></li>
    <li>
      <a
        class="pagination-link is-current"
        aria-label="Page 46"
        aria-current="page"
        >46</a
      >
    </li>
    <li><a href="#" class="pagination-link" aria-label="Goto page 47">47</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a href="#" class="pagination-link" aria-label="Goto page 86">86</a></li>
  </ul>
</nav>

例

HTML 

<nav class="pagination is-medium" role="navigation" aria-label="pagination">
  <a href="#" class="pagination-previous">Previous</a>
  <a href="#" class="pagination-next">Next page</a>
  <ul class="pagination-list">
    <li><a href="#" class="pagination-link" aria-label="Goto page 1">1</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a href="#" class="pagination-link" aria-label="Goto page 45">45</a></li>
    <li>
      <a
        class="pagination-link is-current"
        aria-label="Page 46"
        aria-current="page"
        >46</a
      >
    </li>
    <li><a href="#" class="pagination-link" aria-label="Goto page 47">47</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a href="#" class="pagination-link" aria-label="Goto page 86">86</a></li>
  </ul>
</nav>

例

HTML 

<nav class="pagination is-large" role="navigation" aria-label="pagination">
  <a href="#" class="pagination-previous">Previous</a>
  <a href="#" class="pagination-next">Next page</a>
  <ul class="pagination-list">
    <li><a href="#" class="pagination-link" aria-label="Goto page 1">1</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a href="#" class="pagination-link" aria-label="Goto page 45">45</a></li>
    <li>
      <a
        class="pagination-link is-current"
        aria-label="Page 46"
        aria-current="page"
        >46</a
      >
    </li>
    <li><a href="#" class="pagination-link" aria-label="Goto page 47">47</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a href="#" class="pagination-link" aria-label="Goto page 86">86</a></li>
  </ul>
</nav>

SassおよびCSS変数 #

Sass変数
CSS変数
値
 
$pagination-margin
 
var(--bulma-pagination-margin)
 
-0.25rem
 
$pagination-min-width
 
var(--bulma-pagination-min-width)
 
var(--bulma-control-height)
 
$pagination-item-border-style
 
var(--bulma-pagination-item-border-style)
 
solid
 
$pagination-item-border-width
 
var(--bulma-pagination-item-border-width)
 
var(--bulma-control-border-width)
 
$pagination-item-font-size
 
var(--bulma-pagination-item-font-size)
 
1em
 
$pagination-item-margin
 
var(--bulma-pagination-item-margin)
 
0.25rem
 
$pagination-item-padding-left
 
var(--bulma-pagination-item-padding-left)
 
0.5em
 
$pagination-item-padding-right
 
var(--bulma-pagination-item-padding-right)
 
0.5em
 
$pagination-nav-padding-left
 
var(--bulma-pagination-nav-padding-left)
 
0.75em
 
$pagination-nav-padding-right
 
var(--bulma-pagination-nav-padding-right)
 
0.75em
 
$pagination-disabled-color
 
var(--bulma-pagination-disabled-color)
 
var(--bulma-text-weak)
 
$pagination-disabled-background-color
 
var(--bulma-pagination-disabled-background-color)
 
var(--bulma-border)
 
$pagination-disabled-border-color
 
var(--bulma-pagination-disabled-border-color)
 
var(--bulma-border)
 
$pagination-current-color
 
var(--bulma-pagination-current-color)
 
var(--bulma-link-invert)
 
$pagination-current-background-color
 
var(--bulma-pagination-current-background-color)
 
var(--bulma-link)
 
$pagination-current-border-color
 
var(--bulma-pagination-current-border-color)
 
var(--bulma-link)
 
$pagination-ellipsis-color
 
var(--bulma-pagination-ellipsis-color)
 
var(--bulma-text-weak)
 
$pagination-shadow-inset
 
var(--bulma-pagination-shadow-inset)
 
inset 0 0.0625em 0.125em
  hsla(
    var(--bulma-scheme-h),
    var(--bulma-scheme-s),
    var(--bulma-scheme-invert-l),
    0.2
  )

Bulmaをサポートする方法

1回限りの寄付

スポンサーを訪問する

毎月の寄付

スポンサーになる
#native_company# #native_desc#
#native_cta#