Materialise CSS es una biblioteca de interfaz de usuario de front-end creada por Google mediante la combinación de HTML, CSS y JavaScript. Es básicamente un lenguaje de diseño que combina el diseño clásico junto con las innovaciones y la tecnología modernas. El propósito de Google detrás del desarrollo de Materialise CSS es proporcionar un diseño de sistema unificado para todos sus productos en Internet. Materialise CSS también se conoce como Material Design.
En este artículo, discutiremos uno de esos componentes muy útiles que se pueden encontrar en casi todos los sitios web, es decir, la paginación. La paginación se ve en varios sitios web y el ejemplo más común es la Búsqueda de Google. Puede ver la pestaña de paginación como la que se muestra arriba en la parte inferior de cada página de búsqueda de Google. La paginación ayuda a mostrar una gran cantidad de datos de una mejor manera.
Entendamos esto con la ayuda de un ejemplo: Supongamos que ha buscado teléfonos móviles en el sitio web de Amazon, ahora, Amazon tiene miles de teléfonos móviles para mostrar que no se pueden mostrar en una sola pantalla y si muestra todas las opciones una sola web página, se volverá muy larga y el usuario tiene que hacer un desplazamiento muy agitado y le da al usuario o cliente una muy mala experiencia. En lugar de eso, podemos mostrar supuestos 20 teléfonos móviles en cada página y hacer una paginación al final para que el usuario pueda navegar por ellos.
Ahora, comprendamos cómo usar la paginación utilizando Materialise CSS. Agreguemos el código de paginación para esta página con la siguiente sintaxis.
Sintaxis:
<ul class="pagination">
<li class="active"><a href="#!">1</a></li>
<li class="waves-effect"><a href="#!">2</a></li>
<li class="waves-effect"><a href="#!">3</a></li>
<li class="waves-effect"><a href="#!">4</a></li>
<li class="waves-effect"><a href="#!">5</a></li>
</ul>
Ahora, por defecto, todos los botones que no tienen ninguna URL no están vinculados a ninguna página. Podemos vincular cada uno de los botones de página con una página diferente y también aumentar o disminuir el núm. de páginas aumentando o disminuyendo el número. de elementos de la lista.
Ahora, aquí hay un ejemplo de paginación básica que hemos creado con 4 páginas:
- Si hacemos clic en el número de página, se navega a la página siguiente.
- La página en la que se hace clic se resalta.
Ejemplo: en el siguiente ejemplo, crearemos 3 archivos a los que se puede acceder mediante la navegación.
page1.html
<!DOCTYPE html> <html> <head> <!-- Compiled and minified CSS --> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <!-- Compiled and minified JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"> </script> </head> <body class="container"> <h1>Hello World</h1> <h2>Page One</h2> <ul class="pagination"> <li class="waves-effect active"> <a href="/page1.html">1</a> </li> <li class="waves-effect"> <a href="/page2.html">2</a> </li> <li class="waves-effect"> <a href="/page3.html">3</a> </li> </ul> </body> </html>
page2.html
<!DOCTYPE html> <html> <head> <!-- Compiled and minified CSS --> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <!-- Compiled and minified JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"> </script> </head> <body class="container"> <h1>Hello World</h1> <h2>Page Two</h2> <ul class="pagination"> <li class="waves-effect"> <a href="/page1.html">1</a> </li> <li class="waves-effect active"> <a href="/page2.html">2</a> </li> <li class="waves-effect"> <a href="/page3.html">3</a> </li> </ul> </body> </html>
page3.html
<!DOCTYPE html> <html> <head> <!-- Compiled and minified CSS --> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <!-- Compiled and minified JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"> </script> </head> <body class="container"> <h1>Hello World</h1> <h2>Page Three</h2> <ul class="pagination"> <li class="waves-effect"> <a href="/page1.html">1</a> </li> <li class="waves-effect"> <a href="/page2.html">2</a> </li> <li class="waves-effect active"> <a href="/page3.html">3</a> </li> </ul> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por saikatmohanta43434 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA