in English

Ku vekiwa ka matluka

Matsalwa na swikombiso swo kombisa mapheji ku kombisa nxaxamelo wa swilo leswi fambelanaka swi kona eka matluka yo tala.

Eka tluka leri

Nkatsakanyo

Hi tirhisa xiyenge lexikulu xa swihlanganisi leswi hlanganisiweke eka mapheji ya hina, leswi endlaka leswaku swihlanganisi swi tika ku swi hundza naswona swi olova ku ringaniseriwa—hinkwaswo leswi hi ri karhi hi nyika tindhawu letikulu leti hlaseriweke. Pagination yi akiwile hi swiaki swa HTML swa nxaxamelo leswaku vahlayi va xikirini va kota ku tivisa nhlayo ya swihlanganisi leswi kumekaka. Tirhisa <nav>xiaki xo phutsela ku xi tiveka tanihi xiyenge xo famba-famba ku xikirini vahlayi na thekinoloji yin’wana yo pfuneta.

Ku engetela kwalaho, tanihi leswi matluka ma nga ha vaka ma ri ni swiyenge swo tlula xin’we swo tano swo famba-famba, swa antswa ku nyikela nhlamuselo aria-labelya <nav>leswaku yi kombisa xikongomelo xa yona. Hi xikombiso, loko xiphemu xa matluka xi tirhisiwa ku famba-famba exikarhi ka sete ya mimbuyelo ya ku lavisisa, lebula leyi faneleke yi nga ha va 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>

Ku tirha hi swifaniso

Xana u lava ku tirhisa xifaniso kumbe xikombiso ematshan’weni ya tsalwa eka swihlanganisi swin’wana swa mapheji? Tiyisisa leswaku u nyika nseketelo lowu faneleke wa xihlaya xa xikirini hi ariaswihlawulekisi.

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

Swiyimo leswi lamaleke na leswi tirhaka

Swihlanganisi swa mapheji swi nga cinciwa hi ku ya hi swiyimo swo hambana-hambana. Tirhisa .disabledeka swihlanganisi leswi vonakaka swi nga tikhomi ni .activeku kombisa tluka ra sweswi.

Loko .disabledtlilasi yi tirhisa pointer-events: noneku ringeta ku tshikisa ntirho wa xihlanganisi wa <a>s, nhundzu yoleyo ya CSS a yi si ringanisiwa naswona a yi hlayisi ku famba-famba ka khibhodi. Hi ndlela yaleyo, u fanele ku tshama u engetela tabindex="-1"eka swihlanganisi leswi nga tirhiki naswona u tirhisa JavaScript ya ntolovelo ku tshikisa hi ku helela ntirho wa swona.

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

U nga ha cincana hi ku hlawula ti-anchor leti tirhaka kumbe leti nga tirhiki hi <span>, kumbe u tshika anchor eka xiyimo xa miseve ya le mahlweni/leyi landzelaka, ku susa ntirho wa ku tsindziyela na ku sivela ku kongomisa ka khibhodi loko u ri karhi u hlayisa switayele leswi kunguhatiweke.

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

Ku pima mpimo

Xana u lava ku endla mapheji lamakulu kumbe lamatsongo? Engetela .pagination-lgkumbe .pagination-smku kuma tisayizi leti engetelekeke.

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

Ku ringanisa

Cinca ku ringanisiwa ka swiphemu swa mapheji hi switirhisiwa swa 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

Swilo leswi cinca-cincaka

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

Ti- mixins

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