Primer CSS es de código abierto en Github que se crea con el sistema de diseño de GitHub. Podemos usar Primer CSS instalándolo a través de npm o incluir el enlace CDN en nuestro archivo HTML. Tiene diferentes tipos de estilos como espaciado, color y tipografía.
Primer CSS Pagination se usa para saltar a cualquier página relacionada usando el enlace. Primer CSS Paginación numerada se utiliza para crear las páginas numeradas para navegar a cualquier número de página.
En este artículo, discutiremos la paginación numerada de Primer CSS.
Primer CSS Clases de paginación numeradas:
- paginate-container: esta clase se utiliza para crear el contenedor de paginación.
- paginación: esta clase se utiliza para crear paginación.
Primer Atributos de paginación numerada CSS:
- aria-disabled=”true”: este atributo se usa para agregar el botón Anterior si está en la primera página.
- aria-current=”page”: Este atributo se aplica en la página numerada actual.
- aria-label=”Pagination”: Agrega este atributo al elemento paginate-container.
- aria-label=”Página X”: agregue este atributo a cada enlace de anclaje.
Sintaxis:
<nav class="paginate-container">
<div class="pagination">
<a href="#" aria-label="Page-1">
1
</a>
....
</div>
</nav>
Ejemplo 1: el siguiente código demuestra la paginación numerada de Primer CSS.
HTML
<!DOCTYPE html> <html> <head> <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 Numbered Pagination </h3> </div> <br> <div class="d-flex flex-justify-center"> <nav class="paginate-container"> <div class="pagination"> <em aria-current="page"> 1 </em> <a href="#" aria-label="Page-2"> 2 </a> <a href="#" aria-label="Page-3"> 3 </a> </div> </nav> </div> </body> </html>
Producción:
Primer CSS Paginación numerada
Ejemplo 2: el siguiente código demuestra la paginación numerada de Primer CSS.
HTML
<!DOCTYPE html> <html> <head> <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 Numbered Pagination </h3> </div> <br> <div class="d-flex flex-justify-center"> <nav class="paginate-container"> <div class="pagination"> <span class="previous_page" aria-disabled="true"> Previous </span> <em aria-current="page"> 1 </em> <a href="#" aria-label="Page-2"> 2 </a> <a href="#" aria-label="Page-3"> 3 </a> <a href="#" aria-label="Page-4"> 4 </a> <span class="gap"> … </span> <a href="#" aria-label="Page-12"> 12 </a> <a href="#" aria-label="Page-13"> 13 </a> <a class="next_page" href="#" aria-label="Next"> Next </a> </div> </nav> </div> </body> </html>
Producción:
Primer CSS Paginación numerada
Referencia: https://primer.style/css/components/pagination#numbered-pagination
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA