Blaze UI es un kit de herramientas de interfaz de usuario de código abierto sin marco que utiliza componentes de JavaScript para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para su uso y tiene excelentes elementos diferentes para usar para hacer que su sitio web se vea más sorprendente. Este marco nos permite usar varios de sus estilos y propiedades para hacer que un sitio web sea más fácil de usar.
Blaze UI proporciona una función de paginación, la paginación es útil cuando el sitio web contiene mucho contenido en una sola página y una sola página no se verá bien con todos esos temas juntos.
- Atributos de paginación de la interfaz de usuario de Blaze : Hay dos atributos que son aceptables para la paginación de la interfaz de usuario de Blaze, uno es Página y otro es Páginas.
- Eventos de paginación de la interfaz de usuario de Blaze : solo hay un evento, este evento se activa cuando la página cambia y vuelve a la página actual.
- Métodos de paginación de la interfaz de usuario de Blaze : solo hay un método que es currentPage().
- Blaze UI Pagination CSS: Esto se usa para crear diseños de paginación, control y diferentes páginas.
Podemos agregar una función de paginación usando la etiqueta de paginación de Blaze proporcionada por Blaze UI sin definir ninguna clase. Para esto, siga la siguiente sintaxis dada.
Sintaxis:
<blaze-pagination pages="..." page="..."></blaze-pagination>
Podemos agregar una función de paginación usando las clases proporcionadas por Blaze UI.
Sintaxis:
<nav class="c-pagination">
<button class="c-pagination__control"> ... </button>
<div class="c-pagination__pages">
<button class="c-pagination__control" aria-current="page"> ... </button>
...
</div>
<button class="c-pagination__control"> ... </button>
</nav>
Ejemplo 1: el siguiente código muestra la función de paginación de la interfaz de usuario de Blaze mediante la etiqueta de paginación de la interfaz de usuario de Blaze.
HTML
<!DOCTYPE html> <html> <head> <script type="module" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> </script> <script nomodule="" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> </script> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> </head> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <h3>Blaze UI Pagination</h3> <blaze-pagination pages="6" page="2"> </blaze-pagination> </body> </html>
Producción:
Ejemplo 2: el siguiente código muestra la paginación de la interfaz de usuario de Blaze mediante las clases CSS de la interfaz de usuario de Blaze.
HTML
<!DOCTYPE html> <html> <head> <script type="module" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> </script> <script nomodule="" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> </script> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> </head> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Blaze UI Pagination </h3> <nav class="c-pagination"> <button class="c-pagination__control"> previous </button> <div class="c-pagination__pages"> <button class="c-pagination__control"> 1 </button> <button class="c-pagination__control"> 2 </button> <button class="c-pagination__control" aria-current="page"> 3 </button> </div> <button class="c-pagination__control"> next </button> </nav> </body> </html>
Producción:
Nota: El uso de clases para agregar paginación proporcionará el cuerpo de la paginación, tenemos que agregar algo de JavaScript para que funcione.
Ejemplo 3: el siguiente código demuestra el método de paginación de la interfaz de usuario de Blaze.
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">
<link rel="stylesheet"
href=
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css">
<script type="module"
src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
</script>
<style>
body {
font-family: sans-serif;
text-align: center;
}
</style>
</head>
<body>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>Pagination Methods - Blaze UI</h3>
<div class="u-window-box-super">
<blaze-pagination id="page"
pages="6"
page="2">
</blaze-pagination>
<div class="u-window-box-large">
<button class="c-button"
onclick="func()">
Page Number
</button>
</div>
<div id="demo"></div>
</div>
<script>
async function func() {
var a = await this.document
.querySelector("#page").currentPage();
document.getElementById("demo").innerHTML = a;
}
</script>
</body>
</html>
Producción:
Referencia: https://www.blazeui.com/components/pagination/
Publicación traducida automáticamente
Artículo escrito por anuragsingh1022 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA