Paginación

Qillqakuna chaymanta ejemplokuna paginakuna rikuchinapaq huk serie tupaq contenidokuna achka p'anqakunapi kasqanmanta rikuchinapaq.

Kay p'anqapi

Hatun qhawariy

Huk hatun bloque tinkisqa t'inkikuna p'anqaykupaq llamk'achiyku, t'inkikuna sasa pantay chaymanta mana sasa escalable ruwayku —tukuy hatun tupachisqa áreakuna quchkaspa. Paginación lista HTML elementokunawan ruwasqa chaymanta pantalla ñawiriqkuna willayta atinku hayk'a t'inkikuna kaqta. Huk p'istuy <nav>elementota llamk'achiy huk puriy t'aqa hina riqsichinapaq ñawiriqkunata pantallapaq chaymanta wak yanapakuy tecnologiakuna.

Chaymanta, imaynachus p'anqakuna aswan huk chayhina puriy t'aqayuq kanku, allin kanman huk sut'inchayta quy chaymanta aria-labelchaypaq <nav>propósito kaqta rikuchinanpaq. Ejemplopaq, sichus paginakuna componente huk huñu maskana ruwasqakuna ukhupi purinapaq llamk'achisqa, huk allin etiqueta kanman 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>

Iconokunawan llamk’ay

¿Wakin paginakuna t'inkikunapaq qillqap rantinpi huk icono icha simp'ata llamk'achiyta maskachkankichu? Aswan allin pantalla ñawiriq yanapakuyta quy ariaatributokunawan.

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

Estados discapacitados y activos

Paginación t'inkikuna hukniray circunstanciakunapaq ruwanapaq kanku. Mana .disabledñit'inapaq hina rikhuriq t'inkikunapaq chaymanta .activekunan p'anqata rikuchinapaq llamk'achiy.

Mientras .disabledclase llamk'achin s t'inki ruwayta mana llamk'achiyta munaspapointer-events: none , chay CSS propiedad manaraq estandarizadachu chaymanta mana teclado puriymanta yupayta qunchu. Chayhina, sapa kuti mana atichisqa t'inkikunapi yapanayki tiyan chaymanta sapanchasqa JavaScript llamk'achinayki tiyan tukuy ruwayninkuta mana llamk'achinapaq.<a>tabindex="-1"

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">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>

Munasqaykimanta ruwasqa utaq mana atichisqa anclakuna kaqmanta t'inkinakuyta atikunki <span>, utaq anclata saqiyta atikunki ñawpaq/qhipa flechakuna kaqpi, ñit'iy ruwanakunata hurqunapaq chaymanta teclado enfoqueta hark'anapaq munasqa estilokuna waqaychaspa.

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

Tamaño

¿Aswan hatunchu icha aswan huch’uy paginaciontachu munanki? Añadir .pagination-lgo .pagination-smpara tamaños adicionales.

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

Alineación

flexbox yanapakuykunawan paginakuna rakinakuna chiqanchayta tikray .

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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

Variables nisqakuna

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

Mixinkuna

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