Paginación rehegua

Kuatiahaipyre ha techapyrã ojehechauka hag̃ua paginación ohechauka hag̃ua peteĩ serie contenido ojoajúva oĩha heta página rupi.

Ko páhinape

Tembiecharã

Roipuru peteĩ bloque tuicháva enlace oñembojoajúva ore paginación-pe g̃uarã, rojapóvo umi enlace hasy ojeheja hag̃ua ha ndahasýi ojeescala hag̃ua —opa mba’e rome’ẽ aja área de golpe tuicháva. Paginación oñemopuꞌa elemento HTML lista reheve ikatu hag̃uáicha umi pantalla omoñeꞌeva oikuaauka mboýpa oĩ umi enlace ojeguerekóva. Eipuru peteĩ <nav>elemento envoltura rehegua ehechakuaa hag̃ua peteĩ sección de navegación ramo ehechauka hag̃ua umi lector pantalla ha ambue tecnología oipytyvõva.

Avei, umi páhina oiméne oguerekógui hetave peteĩ sección de navegación ko’ãichagua, iporã oñeme’ẽ peteĩ descriptivo aria-labelpe <nav>ohechauka hag̃ua hembipotápe. Techapyrã, ojeporúramo componente paginación rehegua ojeguata hag̃ua peteĩ conjunto de resultados de búsqueda apytépe, peteĩ etiqueta oñemohenda porãva ikatu haꞌe 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>

Omba’apóva umi icono ndive

¿Reheka reipuru hag̃ua peteĩ ikóna térã símbolo jehaipyre rendaguépe oĩ hag̃ua umi enlace paginación rehegua? Ejesareko eme’ẽ hag̃ua pytyvõ hekopete moñe’ẽhára pantalla rehegua umi ariaatributo reheve.

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

Estado discapacitado ha activo rehegua

Umi enlace paginación rehegua ha’e personalizable opaichagua circunstancia-pe g̃uarã. Eipuru .disabledumi enlace ojehechaukávape g̃uarã ndaikatúiva ojejapo clic ha .activeehechauka hag̃ua pe páhina koʼag̃agua.

Pe .disabledmbo’esyry oipuru pointer-events: noneaja oñeha’ã hag̃ua ombogue s joajuha rembiaporã <a>, upe CSS mba’ekuaarã ne’ĩra gueteri oñemboheko ha ndoguerekói cuenta teclado jeguatarã. Upéicha rupi, akóinte emoĩva’erã tabindex="-1"umi joajuha oñemboykéva rehe ha eipuru JavaScript jeporupyre emboguepaite hag̃ua hembiaporã.

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

Ikatu opcionalmente embohasa anclaje activo térã desactivado -pe g̃uarã <span>, térã eheja rei ancla umi flecha mboyvegua/oúva kásope, eipe’a hag̃ua clic funcionalidad ha ejoko hag̃ua teclado enfoque eñongatu aja umi estilo oñeha’ãva.

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

Dimensionamiento rehegua

¿Fansia paginación tuichavéva térã michĩvéva? Oñemoĩve .pagination-lgtérã .pagination-smumi tamaño adicional-pe g̃uarã.

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

Emoambue alineación umi componente paginación rehegua umi utilidad flexbox ndive .

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

Variables rehegua

$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-kuéra rehegua

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