Paxinación

Documentación e exemplos para mostrar a paxinación para indicar que existe unha serie de contido relacionado en varias páxinas.

Visión xeral

Usamos un gran bloque de ligazóns conectadas para a nosa paxinación, o que fai que as ligazóns sexan difíciles de perder e facilmente escalables, todo ao tempo que ofrece grandes áreas de acceso. A paxinación está construída con elementos HTML de listas para que os lectores de pantalla poidan anunciar o número de ligazóns dispoñibles. Use un elemento de envoltura <nav>para identificalo como sección de navegación para lectores de pantalla e outras tecnoloxías de asistencia.

Ademais, como é probable que as páxinas teñan máis dunha sección de navegación deste tipo, é recomendable proporcionar unha descripción aria-labelpara <nav>reflectir o seu propósito. Por exemplo, se o compoñente de paxinación se usa para navegar entre un conxunto de resultados de busca, unha etiqueta adecuada podería ser 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>

Traballar con iconas

Queres usar unha icona ou un símbolo en lugar do texto para algunhas ligazóns de paxinación? Asegúrate de proporcionar compatibilidade adecuada co lector de pantalla con ariaatributos.

<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 activos e desactivados

As ligazóns de paxinación pódense personalizar para diferentes circunstancias. Utilízase .disabledpara ligazóns que aparecen sen facer clic e .activepara indicar a páxina actual.

Aínda que a .disabledclase adoita tentarpointer-events: none desactivar a función de ligazón de s, esa propiedade CSS aínda non está estandarizada e non ten en conta a navegación do teclado. Polo tanto, sempre debes engadir ligazóns desactivadas e usar JavaScript personalizado para desactivar completamente a súa funcionalidade.<a>tabindex="-1"

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

Opcionalmente, pode cambiar as áncoras activas ou desactivadas por <span>, ou omitir a áncora no caso das frechas anterior/seguinte, para eliminar a función de clic e evitar o foco do teclado mantendo os estilos previstos.

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

Talla

Queres unha paxinación máis grande ou máis pequena? Engadir .pagination-lgou .pagination-smpara tamaños adicionais.

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

Aliñación

Cambia o aliñamento dos compoñentes de paxinación coas utilidades flexbox .

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