Amakhasi

Amadokhumenti nezibonelo zokubonisa ukuphequlula ukuze kuboniswe uchungechunge lokuqukethwe okuhlobene lukhona kumakhasi amaningi.

Kuleli khasi

Uhlolojikelele

Sisebenzisa ibhulokhi enkulu yezixhumanisi ezixhunyiwe ukuze senze amaqebelengwane ethu, okwenza izixhumanisi kube nzima ukuzigeja futhi zikhule kalula—konke lokhu kuhlinzeka ngezindawo ezinkulu ezishaywayo. I-Pagination yakhiwe ngezinto ze-HTML zohlu ukuze abafundi besikrini bakwazi ukumemezela inani lezixhumanisi ezitholakalayo. Sebenzisa into egoqayo <nav>ukuze uyikhombe njengesigaba sokuzulazula kuzifundi zesikrini nobunye ubuchwepheshe obusizayo.

Ngaphezu kwalokho, njengoba amakhasi anengxenye enjalo yokuzulazula engaphezu kweyodwa, kuyatuseka ukuba kunikezwe incazelo aria-labelukuze <nav>ibonise injongo yayo. Isibonelo, uma ingxenye ye-pagination isetshenziselwa ukuzulazula phakathi kwesethi yemiphumela yosesho, ilebula efanelekile ingaba 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>

Ukusebenza ngezithonjana

Ingabe ufuna ukusebenzisa isithonjana noma uphawu esikhundleni sombhalo kwezinye izixhumanisi zamaphegina? Qiniseka ukuthi unikeza usekelo olufanele lwesifundi sesikrini ngezibaluli aria.

<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>

Izimo ezikhubazekile nezisebenzayo

Izixhumanisi zamakhasi zingenziwa ngendlela oyifisayo ezimeni ezahlukene. Sebenzisa .disabledizixhumanisi ezibonakala zingachofozeki kanye .activenokukhombisa ikhasi lamanje.

Ngenkathi .disabledikilasi lisebenzisa pointer-events: noneukuzama ukukhubaza ukusebenza kwesixhumanisi kwe- <a>s, leso sici se-CSS asikakamiswa futhi asibali ukuzulazula kwekhibhodi. Kanjalo, kufanele uhlale ungeza tabindex="-1"kuzixhumanisi ezikhutshaziwe futhi usebenzise i-JavaScript yangokwezifiso ukuze ukhubaze ngokugcwele ukusebenza kwazo.

<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>

Ungakwazi ukukhetha ukushintsha amahange asebenzayo noma avaliwe wenze okuthi <span>, noma ushiye ihange esimweni semicibisholo eyandulele/elandelayo, ukuze ususe ukusebenza kokuchofoza futhi uvimbele ukugxila kwekhibhodi kuyilapho ugcina izitayela ezihlosiwe.

<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>

Ukulinganisa

Uyathanda ukuqanjwa okukhudlwana noma okuncane? Engeza .pagination-lgnoma .pagination-smosayizi abengeziwe.

<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>

Ukuqondanisa

Shintsha ukuqondanisa kwezingxenye zephegination ngezinsiza ze- 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

Okuguquguqukayo

$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;

Imiksi

@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);
      }
    }
  }
}