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.
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ĩ icono térã símbolo jehaipyre rendaguépe algunos enlaces de paginación-pe g̃uarã? 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">«</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">»</span>
</a>
</li>
</ul>
</nav>Estado-kuéra discapacitado ha activo-kuéra
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 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 <span class="sr-only">(current)</span></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ꞌarõ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 class="sr-only">(current)</span>
</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 class="sr-only">(current)</span>
</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 class="sr-only">(current)</span>
</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>