Pagination

La paginación se utiliza para dividir contenido o datos en varias páginas, con un control para navegar a la página siguiente o anterior.

En general, la paginación se usa si se muestran más de un cierto número de elementos en una vista. El número predeterminado que se muestra variará según el contexto.

Variaciones y tipos

Demo en vivo

Rows per page:
<div class="rds-pagination">
  <nav class="rds-pagination__nav">
    <button type="button" class="rds-btn rds-btn--secondary rds-btn--icon rds-btn--small">
      <span class="rds-pagination__prev rds-btn__icon rds-btn__icon--small rds-icon-Arrow_left" aria-label="Prev page"></span>
    </button>
    <a href="#" class="rds-pagination__item" aria-label="Go to page 99">99</a>
    <a href="#" class="rds-pagination__item" aria-label="Go to page 99">99</a>
    <a href="#" class="rds-pagination__item rds-pagination__item--active" aria-current="true">99</a>
    <button type="button" class="rds-btn rds-btn--secondary rds-btn--icon rds-btn--small">
      <span class="rds-btn__icon rds-btn__icon--small rds-icon-Arrow_right" aria-label="Next page"></span>
    </button>
  </nav>
  <div class="rds-pagination__dropdown">
    <span class="rds-pagination__label">Rows per page:</span>
    <div class="rds-dropdown__cnt">
      <select required id="dropdown3" class="rds-dropdown rds-dropdown--text">
        <option>20</option>
        <option>99</option>
        <option>900</option>
      </select>
      <span class="rds-dropdown__arrow rds-dropdown__arrow--text rds-icon-Arrow_down" aria-hidden="true"></span>
    </div>
  </div>
</div>

Estados

  • Default
    Su estado por defecto.

  • Hover
    Indica que es un elemento interactivo cuando el usuario hace hover con su cursor.

  • Active
    Estado en que se encuentra mientras sucede la interacción del usuario con el componente.

  • Focus
    Comunica que el usuario ha seleccionado este elemento.