Axawo dzi nɔnɔ

Nuŋlɔɖiwo kple kpɔɖeŋu siwo woatsɔ aɖe axawo ɖeɖefia afia be woatsɔ afia nya siwo do ƒome kplii siwo kplɔ wo nɔewo ɖo la li le axa geɖe dzi.

Le axa sia dzi

Kpɔɖeŋunyagbɔgblɔ

Míezãa kadodo siwo do ƒome kple wo nɔewo ƒe ƒuƒoƒo gã aɖe na míaƒe axawo, si wɔnɛ be kadodowo sesẽna be woato wo ŋu eye woate ŋu atrɔ asi le wo ŋu bɔbɔe—esiawo katã míenaa teƒe gã siwo woadze ame dzi le. Wotu axawo kple list HTML elements ale be screen readers nateŋu aɖe gbeƒã kadodo siwo li ƒe xexlẽme. Zã nusi wotsɔ blaa <nav>nu nàtsɔ ade dzesii be enye mɔfianu ƒe akpa si woatsɔ akpɔ nuxlẽlawo kple mɔ̃ɖaŋununya bubu siwo kpena ɖe ame ŋu la dzi.

Tsɔ kpe ɖe eŋu la, esi wònye be anɔ eme be axawo ƒe akpa mawo sɔ gbɔ wu ɖeka le mɔfiamewo me ta la, anyo be nàna numeɖeɖe aɖe aria-labelna <nav>be wòaɖe eƒe taɖodzinu afia. Le kpɔɖeŋu me, ne wozã axadzinɔnɔ ƒe akpaa tsɔ zɔ mɔ le nyatakaka siwo nèdi ƒe hatsotso aɖe dome la, ŋkɔ si sɔ ate ŋu anye 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>

Dɔwɔwɔ kple nɔnɔmetatawo

Èle didim be yeazã dzesi alo dzesi aɖe ɖe nuŋɔŋlɔ teƒe na axawo ƒe kadodo aɖewoa? Kpɔ egbɔ be yena screen reader ƒe kpekpeɖeŋu nyuitɔ kple arianɔnɔmewo.

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

Nuwɔametɔwo kple nɔnɔme siwo le dɔ wɔm

Woate ŋu atrɔ asi le axadzinɔnɔ ƒe kadodowo ŋu na nɔnɔme vovovowo. Zãe .disabledna kadodo siwo dze abe womate ŋu azi wo dzi o ene eye .activenàtsɔ afia axa si dzi nèle fifia.

Togbɔ be .disabledklass la zãna pointer-events: nonetsɔ dzea agbagba be yeawɔ s ƒe kadodo ƒe dɔwɔwɔ nuwɔametɔ hã la <a>, CSS ƒe nɔnɔme ma meɖo ɖoɖo nu haɖe o eye mebu akɔnta le keyboard ƒe mɔzɔzɔ ŋu o. Esi wòle alea ta la, ele be nàtsɔ tabindex="-1"kadodo siwo wowɔ nuwɔametɔe la akpe ɖe eŋu ɣesiaɣi eye nàzã JavaScript si wowɔ ɖe ɖoɖo nu atsɔ awɔ woƒe dɔwɔwɔ ŋudɔ keŋkeŋ.

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

Àteŋu aɖɔli seke siwo le dɔ wɔm alo esiwo mewɔ dɔ o la ɖe <span>, alo aɖe sekea ɖa le aŋutrɔ siwo do ŋgɔ/si kplɔe ɖo gome, be nàɖe asiƒoƒo ƒe dɔwɔwɔ ɖa eye nàxe mɔ ɖe keyboard ƒe susu nu esime nèlé atsyã siwo nèɖo la me ɖe asi.

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

Sizing ƒe lolome

Axa siwo lolo wu alo esiwo le sue wu la dze ŋuwòa? Tsɔe kpe ɖe eŋu .pagination-lgalo .pagination-smna lolome bubuwo.

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

Ðoɖowɔwɔ ɖe ɖoɖo nu

Trɔ axawo ƒe akpawo ƒe ɖoɖowɔwɔ kple flexbox dɔwɔnuwo .

<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 ƒe nyawo

Nusiwo trɔna

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

Nusiwo wotsɔ tsakae

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