Pagination

pagination ریسپانسیو وانعطاف پذیر

Colors No
Sizes Yes
Variables Yes

کامپوننت pagination از چندین المان تشکیل شده است:

  • pagination-previous و pagination-next
  • pagination-list آیتم های صفحات را نشان می دهد:
    • pagination-link برای شماره صفحه
    • pagination-ellipsis جدا کننده

همه المان ها اختیاری هستند بنابراین می توانید صفحه بندی خود را به دلخواه خود بسازید.


<nav class="pagination" role="navigation" aria-label="pagination">
  <a class="pagination-previous">قبلی</a>
  <a class="pagination-next">صفحه بعدی</a>
  <ul class="pagination-list">
    <li>
      <a class="pagination-link" aria-label="Goto page 1">1</a>
    </li>
    <li>
      <span class="pagination-ellipsis">&hellip;</span>
    </li>
    <li>
      <a 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 class="pagination-link" aria-label="Goto page 47">47</a>
    </li>
    <li>
      <span class="pagination-ellipsis">&hellip;</span>
    </li>
    <li>
      <a class="pagination-link" aria-label="Goto page 86">86</a>
    </li>
  </ul>
</nav>
                    

اگر برخی از پیوندها فعال نیستند ، می توانید غیرفعال کنید یا مقدار شماره صفحه موجود را تغییر دهید.


<nav class="pagination" role="navigation" aria-label="pagination">
  <a class="pagination-previous" title="This is the first page" disabled>قبلی</a>
  <a class="pagination-next">صفحه بعدی</a>
  <ul class="pagination-list">
    <li>
      <a class="pagination-link is-current" aria-label="Page 1" aria-current="page">1</a>
    </li>
    <li>
      <a class="pagination-link" aria-label="Goto page 2">2</a>
    </li>
    <li>
      <a class="pagination-link" aria-label="Goto page 3">3</a>
    </li>
  </ul>
</nav>
                    

به طور پیش فرض در tablet ،لیست در سمت چپ و دکمه های قبلی / بعدی در سمت راست قرار دارد. اما می توانید ترتیب این المان ها را با استفاده از کلاس های اصلاح کننده is-centered و is-left تغییر دهید.


<nav class="pagination is-centered" role="navigation" aria-label="pagination">
  <a class="pagination-previous">قبلی</a>
  <a class="pagination-next">صفحه بعدی</a>
  <ul class="pagination-list">
    <li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a 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 class="pagination-link" aria-label="Goto page 47">47</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
 </ul>
</nav>
                    

<nav class="pagination is-left" role="navigation" aria-label="pagination">
  <a class="pagination-previous">قبلی</a>
  <a class="pagination-next">صفحه بعدی</a>
  <ul class="pagination-list">
    <li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a 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 class="pagination-link" aria-label="Goto page 47">47</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
  </ul>
</nav>
                    

استایل #

Since 0.6.2

کلاس اصلاح کننده is-rounded را یرای آیتم های گرد صفحه بندی را اضافه کنید


<nav class="pagination is-rounded" role="navigation" aria-label="pagination">
 <a class="pagination-previous">قبلی</a>
 <a class="pagination-next">صفحه بعدی</a>
 <ul class="pagination-list">
  <li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
  <li><span class="pagination-ellipsis">&hellip;</span></li>
  <li><a 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 class="pagination-link" aria-label="Goto page 47">47</a></li>
  <li><span class="pagination-ellipsis">&hellip;</span></li>
  <li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
 </ul>
</nav>
                    

اندازه #

صفحه بندی در 3 اندازه وجود دارد.
فقط کلاس های اصلاح کننده is-small، is-medium، یا is-large را به کامپوننت pagination اضافه کنید.


<nav class="pagination is-small" role="navigation" aria-label="pagination">
 <a class="pagination-previous">قبلی</a>
 <a class="pagination-next">صفحه بعد</a>
  <ul class="pagination-list">
  <li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
  <li><span class="pagination-ellipsis">&hellip;</span></li>
  <li><a 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 class="pagination-link" aria-label="Goto page 47">47</a></li>
  <li><span class="pagination-ellipsis">&hellip;</span></li>
  <li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
 </ul>
</nav>
                    

<nav class="pagination is-medium" role="navigation" aria-label="pagination">
 <a class="pagination-previous">قبلی</a>
 <a class="pagination-next">صفحه بعد</a>
 <ul class="pagination-list">
  <li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
  <li><span class="pagination-ellipsis">&hellip;</span></li>
  <li><a 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 class="pagination-link" aria-label="Goto page 47">47</a></li>
  <li><span class="pagination-ellipsis">&hellip;</span></li>
  <li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
 </ul>
</nav>
                    

<nav class="pagination is-large" role="navigation" aria-label="pagination">
 <a class="pagination-previous">قبلی</a>
 <a class="pagination-next">صفحه بعد</a>
 <ul class="pagination-list">
  <li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
  <li><span class="pagination-ellipsis">&hellip;</span></li>
  <li><a 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 class="pagination-link" aria-label="Goto page 47">47</a></li>
  <li><span class="pagination-ellipsis">&hellip;</span></li>
  <li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
 </ul>
</nav>
                    

متغیرها #

برای شخصی سازی این کامپوننت می توانید از این متغیرها استفاده کنید. قبل از وارد کردن Bulma یک یا چند متغیر مورد از متغیر هارا به سادگی تنظیم کنید.یاد بگیرید چگونه.

نام نوع مقدار پیش فرض مقدار ماسبه شده
نام نوع مقدار پیش فرض مقدار ماسبه شده
$pagination-color color $text-strong hsl(0, 0%, 21%)
$pagination-border-color color $border hsl(0, 0%, 86%)
$pagination-margin size -0.25rem
$pagination-min-width variable $control-height
$pagination-item-font-size size 1em
$pagination-item-margin size 0.25rem
$pagination-item-padding-left size 0.5em
$pagination-item-padding-right size 0.5em
$pagination-hover-color color $link-hover hsl(0, 0%, 21%)
$pagination-hover-border-color color $link-hover-border hsl(0, 0%, 71%)
$pagination-focus-color color $link-focus hsl(0, 0%, 21%)
$pagination-focus-border-color color $link-focus-border hsl(217, 71%, 53%)
$pagination-active-color color $link-active hsl(0, 0%, 21%)
$pagination-active-border-color color $link-active-border hsl(0, 0%, 29%)
$pagination-disabled-color color $text-light hsl(0, 0%, 48%)
$pagination-disabled-background-color color $border hsl(0, 0%, 86%)
$pagination-disabled-border-color color $border hsl(0, 0%, 86%)
$pagination-current-color color $link-invert #fff
$pagination-current-background-color color $link hsl(217, 71%, 53%)
$pagination-current-border-color color $link hsl(217, 71%, 53%)
$pagination-ellipsis-color color $grey-light hsl(0, 0%, 71%)