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

html rehegua

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

html rehegua

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

html rehegua

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

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.

html rehegua

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

html rehegua

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

html rehegua

<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 . Techapyrã, ndive .justify-content-center:

html rehegua

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

Térã ndive .justify-content-end:

html rehegua

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

CSS rehegua

Variables rehegua

Oñemoĩve v5.2.0-pe

Pehẽngue ramo Bootstrap CSS mbaꞌekuaarã ñemboheko oñembohapévape, koꞌág̃a paginación oipuru CSS mbaꞌekuaarã local on .paginationoñembotuichave hag̃ua personalización tiempo real-pe. Umi mbaꞌekuaarã CSS mbaꞌekuaarãme g̃uarã oñemohenda Sass rupive, upévare oipytyvõ gueteri Sass jeporupyre, avei.

  --#{$prefix}pagination-padding-x: #{$pagination-padding-x};
  --#{$prefix}pagination-padding-y: #{$pagination-padding-y};
  @include rfs($pagination-font-size, --#{$prefix}pagination-font-size);
  --#{$prefix}pagination-color: #{$pagination-color};
  --#{$prefix}pagination-bg: #{$pagination-bg};
  --#{$prefix}pagination-border-width: #{$pagination-border-width};
  --#{$prefix}pagination-border-color: #{$pagination-border-color};
  --#{$prefix}pagination-border-radius: #{$pagination-border-radius};
  --#{$prefix}pagination-hover-color: #{$pagination-hover-color};
  --#{$prefix}pagination-hover-bg: #{$pagination-hover-bg};
  --#{$prefix}pagination-hover-border-color: #{$pagination-hover-border-color};
  --#{$prefix}pagination-focus-color: #{$pagination-focus-color};
  --#{$prefix}pagination-focus-bg: #{$pagination-focus-bg};
  --#{$prefix}pagination-focus-box-shadow: #{$pagination-focus-box-shadow};
  --#{$prefix}pagination-active-color: #{$pagination-active-color};
  --#{$prefix}pagination-active-bg: #{$pagination-active-bg};
  --#{$prefix}pagination-active-border-color: #{$pagination-active-border-color};
  --#{$prefix}pagination-disabled-color: #{$pagination-disabled-color};
  --#{$prefix}pagination-disabled-bg: #{$pagination-disabled-bg};
  --#{$prefix}pagination-disabled-border-color: #{$pagination-disabled-border-color};

Sass mba’ekuaarã

$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-font-size:              $font-size-base;

$pagination-color:                  var(--#{$prefix}link-color);
$pagination-bg:                     $white;
$pagination-border-radius:          $border-radius;
$pagination-border-width:           $border-width;
$pagination-margin-start:           ($pagination-border-width * -1);
$pagination-border-color:           $gray-300;

$pagination-focus-color:            var(--#{$prefix}link-hover-color);
$pagination-focus-bg:               $gray-200;
$pagination-focus-box-shadow:       $input-btn-focus-box-shadow;
$pagination-focus-outline:          0;

$pagination-hover-color:            var(--#{$prefix}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;

Sass mixins rehegua

@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
  --#{$prefix}pagination-padding-x: #{$padding-x};
  --#{$prefix}pagination-padding-y: #{$padding-y};
  @include rfs($font-size, --#{$prefix}pagination-font-size);
  --#{$prefix}pagination-border-radius: #{$border-radius};
}