Pagination

Dukumeentiyada iyo tusaalooyinka muujinta bogga si ay u muujiyaan taxane taxane ah oo la xidhiidha ayaa ka jira bogag badan.

Boggan

Dulmar

Waxa aanu u isticmaalnaa xidhidhisyo badan oo isku xidhan si aanu u dhigno boggayaga, taas oo ka dhigaysa isku xidhka mid adag in la seego oo si fudud loo cabbiri karo—dhammaan annaga oo bixinayna goobo waaweyn oo la garaacay. Pagination waxaa lagu dhisay liiska HTML si ay akhristayaasha shaashadda ugu dhawaaqaan tirada xiriiriyeyaasha la heli karo. Isticmaal walxaha duuban <nav>si aad u aqoonsato inay tahay qayb hagitaan si aad u baadho akhristayaasha iyo tignoolajiyada kale ee caawiya.

Intaa waxaa dheer, maadaama ay u badan tahay in bogaggu ay leeyihiin wax ka badan hal qayb oo ka mid ah qaybta hagidda, waxaa lagu talinayaa in la bixiyo sharraxaad aria-labelsi <nav>ay uga tarjumayso ujeeddadeeda. Tusaale ahaan, haddii qaybta pagination-ka loo isticmaalo in lagu dhex maro natiijooyinka raadinta, calaamad ku habboon waxay noqon kartaa aria-label="Search results pages".

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

La shaqaynta calaamadaha

Ma waxaad raadineysaa inaad u isticmaasho summada ama calaamada meesha qoraalka ee xiriirinta boggaga qaarkood? Hubi inaad bixiso taageero akhristaha shaashadda habboon oo leh ariasifooyin.

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Naafada iyo gobolada firfircoon

Xidhiidhiyayaasha boggaga ayaa lagu beddeli karaa xaalado kala duwan. U isticmaal .disabledxiriiriyeyaasha u muuqda mid aan la gujin karin iyo .activesi aad u muujiso bogga hadda jira.

Iyadoo .disabledfasalka uu isticmaalo pointer-events: noneinuu isku dayo inuu joojiyo shaqada isku xirka ee <a>s, hantida CSS weli lama jaan qaadin oo kuma xisaabtamayso socodka kiiboodhka. Sidan oo kale ah, waa inaad had iyo jeer tabindex="-1"ku darto xiriiriyeyaasha naafada ah oo aad isticmaashaa JavaScript-ka caadiga ah si aad si buuxda u baabi'iso shaqadooda.

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page">
      <a class="page-link" href="#">2</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

Waxaad si ikhtiyaari ah u beddeli kartaa barroosinnada firfircoon ama kuwa naafada ah <span>, ama waxaad ka tagi kartaa barroosinka xaaladda fallaadhihii hore/xiga, si aad meesha uga saarto shaqeynta gujinta oo aad uga hortagto diiradda kiiboodhka iyadoo la ilaalinayo qaababka loogu talagalay.

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <span class="page-link">Previous</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page">
      <span class="page-link">2</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

Cabbirka

Ma jeceshahay bogag ka weyn ama ka yar? Ku dar .pagination-lgama .pagination-smcabbiro dheeraad ah.

<nav aria-label="...">
  <ul class="pagination pagination-lg">
    <li class="page-item active" aria-current="page">
      <span class="page-link">1</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>

<nav aria-label="...">
  <ul class="pagination pagination-sm">
    <li class="page-item active" aria-current="page">
      <span class="page-link">1</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>

Toosin

Beddel toosinta qaybaha pagination-ka oo leh yutiilitida flexbox .

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-end">
    <li class="page-item disabled">
      <a class="page-link">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

Sass

Kala duwanaansho

$pagination-padding-y:              .375rem;
$pagination-padding-x:              .75rem;
$pagination-padding-y-sm:           .25rem;
$pagination-padding-x-sm:           .5rem;
$pagination-padding-y-lg:           .75rem;
$pagination-padding-x-lg:           1.5rem;

$pagination-color:                  $link-color;
$pagination-bg:                     $white;
$pagination-border-width:           $border-width;
$pagination-border-radius:          $border-radius;
$pagination-margin-start:           -$pagination-border-width;
$pagination-border-color:           $gray-300;

$pagination-focus-color:            $link-hover-color;
$pagination-focus-bg:               $gray-200;
$pagination-focus-box-shadow:       $input-btn-focus-box-shadow;
$pagination-focus-outline:          0;

$pagination-hover-color:            $link-hover-color;
$pagination-hover-bg:               $gray-200;
$pagination-hover-border-color:     $gray-300;

$pagination-active-color:           $component-active-color;
$pagination-active-bg:              $component-active-bg;
$pagination-active-border-color:    $pagination-active-bg;

$pagination-disabled-color:         $gray-600;
$pagination-disabled-bg:            $white;
$pagination-disabled-border-color:  $gray-300;

$pagination-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

$pagination-border-radius-sm:       $border-radius-sm;
$pagination-border-radius-lg:       $border-radius-lg;

Isku qas

@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
  .page-link {
    padding: $padding-y $padding-x;
    @include font-size($font-size);
  }

  .page-item {
    @if $pagination-margin-start == (-$pagination-border-width) {
      &:first-child {
        .page-link {
          @include border-start-radius($border-radius);
        }
      }

      &:last-child {
        .page-link {
          @include border-end-radius($border-radius);
        }
      }
    } @else {
      //Add border-radius to all pageLinks in case they have left margin
      .page-link {
        @include border-radius($border-radius);
      }
    }
  }
}