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 Pagination se usa para crear el conjunto de páginas y podemos saltar a cualquier página si queremos. Podemos ir a las páginas anterior, siguiente y numerada .
Primer clases de paginación CSS:
- paginate-container: esta clase se utiliza para crear el contenedor de paginación.
- paginación: esta clase se utiliza para crear paginación.
- página_anterior: Esta clase se utiliza para ir a la página anterior.
- next_page: Esta clase se utiliza para ir a la página siguiente.
Sintaxis:
<nav class="paginate-container">
<div class="pagination">
<span class="previous_page" aria-disabled="true">
...
</span>
<a href="#" aria-label="..."> ... </a>
<a class="next_page" rel="next" href="#">
...
</a>
</div>
</nav>
Ejemplo 1: Este ejemplo demuestra la implementación de Primer CSS Pagination.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Pagination </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Pagination </h3> <br> <nav class="paginate-container"> <div class="pagination"> <span class="previous_page" href="#"> Previous </span> <a class="next_page" href="#" > Next </a> </div> </nav> </div> </body> </html>
Producción:
Primer CSS Paginación
Ejemplo 2: Este ejemplo demuestra la implementación de Primer CSS Pagination.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Pagination </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Pagination </h3> <br> <nav class="paginate-container"> <div class="pagination"> <span class="previous_page" href="#"> Previous </span> <em aria-current="Page1"> 1 </em> <a href="#" aria-label="2"> 2 </a> <a href="#" aria-label="3"> 3 </a> <span class="gap">…</span> <a href="#" aria-label="11"> 11 </a> <a href="#" aria-label="12"> 12 </a> <a class="next_page" href="#" > Next </a> </div> </nav> </div> </body> </html>
Producción:
Primer CSS Paginación.
Referencia: https://primer.style/css/components/pagination
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA