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/