Source

Paginación

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

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 chaymanta .sr-onlyyanapakuywan.

<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>
        <span class="sr-only">Previous</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>
        <span class="sr-only">Next</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">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active">
      <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>

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

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 disabled">
      <a class="page-link" href="#" tabindex="-1">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>
  </ul>
</nav>

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