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.
