Spectre Pagination se usa para crear una paginación, básicamente se usa para permitir la navegación entre páginas en un sitio web. La paginación utilizada en Spectre tiene un gran bloque de enlaces conectados que son difíciles de perder y son fácilmente escalables.
Para crear una paginación, debe agregar un elemento contenedor con la clase de paginación . Y agregue elementos secundarios con la clase de elemento de página . Se resaltará el elemento de página con la clase activa . Puede agregar la clase deshabilitada al elemento de página para tener enlaces de página en los que no se pueda hacer clic.
Clase de paginación de espectro:
- paginación: esta clase se utiliza para crear paginación.
- elemento de página: esta clase se utiliza para establecer los números o el elemento de página de paginación.
Nota: La clase activa y deshabilitada se puede usar para hacer que el elemento de página esté activo y deshabilitado.
Sintaxis:
<ul class="pagination">
<li class="page-item disabled">
<a href="#">...</a>
</li>
<li class="page-item active">
<a href="#">...</a>
</li>
</ul>
Los siguientes ejemplos ilustran la paginación de Spectre:
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <head> <title>SPECTRE Nav Class</title> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> </head> <body> <center> <h1>GeeksforGeeks</h1> <strong>SPECTRE Pagination Class</strong> </center> <strong>Numeric Pagination:</strong> <ul class="pagination"> <li class="page-item disabled"> <a href="#" tabindex="-1">Previous</a> </li> <li class="page-item "> <a href="#">1</a> </li> <li class="page-item"> <a href="#">2</a> </li> <li class="page-item"> <a href="#">3</a> </li> <li class="page-item"> <span>...</span> </li> <li class="page-item active"> <a href="#">12</a> </li> <li class="page-item"> <a href="#">Next</a> </li> </ul> <br><br> <strong>Alphabetic Pagination:</strong> <ul class="pagination"> <li class="page-item disabled"> <a href="#" tabindex="-1">Previous</a> </li> <li class="page-item "> <a href="#">A</a> </li> <li class="page-item"> <a href="#">B</a> </li> <li class="page-item"> <a href="#">C</a> </li> <li class="page-item"> <span>...</span> </li> <li class="page-item active"> <a href="#">Z</a> </li> <li class="page-item"> <a href="#">Next</a> </li> </ul> </body> </html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <head> <title>SPECTRE Pagination Class</title> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> </head> <body> <center> <h1>GeeksforGeeks</h1> <strong>SPECTRE Pagination Class</strong> </center> <ul class="pagination"> <li class="page-item page-prev"> <a href="#"> <div class="page-item-subtitle"> Previous </div> <div class="page-item-title h5"> Spectre Nav </div> </a> </li> <li class="page-item page-next"> <a href="#"> <div class="page-item-subtitle"> Next </div> <div class="page-item-title h5"> Spectre Panel </div> </a> </li> </ul> </body> </html>
Producción:
Referencia: https://picturepan2.github.io/spectre/components/pagination.html
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA