Pej dɛn we dɛn rayt

Dokumɛnt ɛn ɛgzampul dɛn fɔ sho pej fɔ sho se wan siriɔs tin we gɛt fɔ du wit dis de akɔdin to bɔku pej dɛn.

Na dis pej

Ɔvaviu fɔ di Baybul

Wi de yuz wan big blɔk we gɛt kɔnɛkt link fɔ wi pej, we de mek link dɛn at fɔ mis ɛn izi fɔ skel—ɔl dis de gi big hit eria dɛn. Dɛn bil pejeshɔn wit list HTML ɛlimɛnt dɛn so dat di wan dɛn we de rid di skrin go ebul fɔ anɔys di nɔmba fɔ di link dɛn we de. Yuz wan wrap <nav>ɛlimɛnt fɔ no am as nevigishɔn sɛkshɔn fɔ skrin rida ɛn ɔda ɛtɛknɔlɔji dɛn we de ɛp.

Apat frɔm dat, bikɔs i go mɔs bi se pej dɛn gɛt mɔ pas wan pat pan dɛn kayn nevigishɔn sɛkshɔn dɛn de, i fayn fɔ gi wan diskrɔtif aria-labelfɔ di <nav>fɔ sho wetin i want fɔ du. Fɔ ɛgzampul, if dɛn yuz di pej pat fɔ go bitwin wan sɛt fɔ di tin dɛn we dɛn dɔn fɛn, wan rayt lɛbl kin bi 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>

We yu de wok wit aykɔn dɛn

Yu de luk fɔ yuz aykɔn ɔ simbul insay di ples fɔ tɛks fɔ sɔm pej link dɛn? Mek shɔ se yu gi di rayt skrin rida sɔpɔt wit ariaatribyut dɛn.

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

Disabled ɛn aktif stet dɛn

Pejin link dɛn kin kɔstɔmayt fɔ difrɛn tin dɛn. Yuz .disabledfɔ link dɛn we tan lɛk se yu nɔ go ebul fɔ klik ɛn .activefɔ sho di pej we yu de yuz naw.

Wail di .disabledklas de yuz pointer-events: nonefɔ tray fɔ disable di link funkshɔnaliti fɔ <a>s, da CSS prɔpati de nɔ standad yet ɛn i nɔ de akɔn fɔ kibɔd nevigishɔn. As a so, yu fɔ ad ɔltɛm tabindex="-1"pan link dɛn we nɔ de wok ɛn yuz kɔstɔm JavaSkript fɔ fulɔp fɔ disable dɛn wok.

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

Yu kin opshɔnali swap aut aktif ɔ disabled ankɔ dɛn fɔ <span>, ɔ ɔmit di anka insay di kes fɔ di prɛv/nɛks aro dɛn, fɔ pul di klik funkshɔnaliti ɛn fɔ mek di kibɔd nɔ pe atɛnshɔn we yu de kip di stayl dɛn we yu want.

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

Sayz fɔ di sayz

Fans big ɔ smɔl pejineshɔn? Ad .pagination-lgɔ .pagination-smfɔ ɔda saiz dɛn.

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

Alignmɛnt fɔ di wan dɛn we de

Chenj di alaynɛshɔn fɔ pejin kɔmpɔnɛnt dɛn wit fleksbɔks yutiliti dɛn .

<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 we bin de

Di tin dɛn we kin chenj

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

Mixin dɛn

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