Blaze UI es un conjunto de herramientas de interfaz de usuario que ayuda a los desarrolladores a crear sitios web mantenibles mediante el uso de sus componentes. Todos sus componentes son móviles primero y se escalan en consecuencia según el tamaño de la pantalla.
En este artículo, veremos los atributos de paginación de la interfaz de usuario de Blaze . La paginación es la técnica de dividir el contenido en páginas separadas cuando todos los datos no caben en una sola página. Para usar la paginación, podemos usar el elemento <blaze-pagination> .
Atributos de paginación de la interfaz de usuario de Blaze:
- páginas: este atributo se utiliza para establecer el número total de páginas en la paginación.
- página: este atributo se utiliza para establecer la página actual en la paginación.
Sintaxis:
<blaze-pagination pages="TOTAL_PAGES" page="CURRENT_PAGE"> </blaze-pagination>
Ejemplo 1: El siguiente ejemplo muestra un componente de paginación con 8 páginas en total y la página actual configurada en 2 inicialmente.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title> Pagination Attributes | Blaze UI </title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css"> <!-- We need to include the Blaze UI Javascript here --> <script type="module" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> </script> <style> html { font-family: sans-serif; text-align: center; } </style> </head> <body> <h2 style="color: green;"> GeeksforGeeks </h2> <h3> Pagination Attributes - Blaze UI </h3> <div class="u-window-box-super"> <blaze-pagination pages="8" page="2"> </blaze-pagination> </div> </body> </html>
Producción:
Ejemplo 2: el atributo de página es opcional. Si no se proporciona, la página se establecerá en 1. Este ejemplo muestra lo mismo.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title> Pagination Attributes | Blaze UI </title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css"> <!-- We need to include the Blaze UI Javascript here --> <script type="module" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> </script> <style> html { font-family: sans-serif; text-align: center; } </style> </head> <body> <h2 style="color: green;"> GeeksforGeeks </h2> <h3> Pagination Attributes - Blaze UI </h3> <div class="u-window-box-super"> <blaze-pagination pages="5"> </blaze-pagination> </div> </body> </html>
Producción:
Referencia: https://www.blazeui.com/components/pagination/