Atributos de paginación de la interfaz de usuario de Blaze

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:

Atributos de paginación de la interfaz de usuario de Blaze

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:

Atributos de paginación de la interfaz de usuario de Blaze

Referencia: https://www.blazeui.com/components/pagination/

Publicación traducida automáticamente

Artículo escrito por vpsop y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *