Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientado a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
Primer CSS ofrece paginación anterior/siguiente que se puede realizar con el botón anterior y siguiente agregando un atributo aria-disabled=”true” al botón anterior si no hay una página anterior disponible o al botón siguiente si no hay una página siguiente disponible.
Primer CSS Paginación anterior/siguiente Clases utilizadas:
- página_anterior: esta clase se utiliza para crear un icono de flecha anterior.
- next_page: esta clase se utiliza para crear un icono de flecha anterior.
Sintaxis:
<nav class="paginate-container" aria-label="Pagination">
<div class="pagination">
<span class="previous_page">
...
</span>
<a class="next_page" rel="next" href="#"
aria-disabled="true" aria-label="Next Page">
...
</a>
</div>
</nav>
Ejemplo 1: Este ejemplo demuestra el uso de la paginación anterior/siguiente de Primer CSS con el atributo aria-disabled=”true” para el botón siguiente.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS offers Previous/next Pagination </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/Primer/0.0.0-20220329110403/primer.css"> </head> <body> <center> <h1 class="color-fg-open"> GeeksforGeeks </h1> <h4>Primer CSS offers Previous/next Pagination</h4> <nav class="paginate-container" aria-label="Pagination"> <div class="pagination"> <span class="previous_page">Older</span> <a class="next_page" aria-disabled="true" href="#" aria-label="Next Page">Newer </a> </div> </nav> </center> </body> </html>
Producción:
Primer CSS Paginación anterior/siguiente
Ejemplo 2: Este es otro ejemplo que demuestra el uso de la paginación anterior/siguiente de Primer CSS con el atributo aria-disabled=”true” para el botón anterior.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS offers Previous/next Pagination </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/Primer/0.0.0-20220329110403/primer.css"> </head> <body> <center> <h1 class="color-fg-open"> GeeksforGeeks </h1> <h4>Primer CSS offers Previous/next Pagination</h4> <nav class="paginate-container" aria-label="Pagination"> <div class="pagination"> <span class="previous_page" aria-disabled="true"> Older </span> <a class="next_page" href="#" aria-label="Next Page"> Newer </a> </div> </nav> </center> </body> </html>
Producción:
Primer CSS Paginación anterior/siguiente
Referencia: https://primer.style/css/components/pagination#previousnext-pagination
Publicación traducida automáticamente
Artículo escrito por singhtripti y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA