Blaze UI es un kit de herramientas de interfaz de usuario ligero de código abierto que proporciona excelentes herramientas para crear aplicaciones personalizadas y escalables. Puede funcionar con cualquier framework que exista. Puede adaptarse a cualquier ecosistema. Todos los diseños o CSS son móviles primero y, por lo tanto, receptivos.
Blaze UI Pagination permite implementar la división de una sola página en varias páginas y mostrarlas de manera eficiente. Podemos separar el contenido en diferentes páginas y luego seleccionar cualquiera de ellas.
Atributos de paginación de la interfaz de usuario de Blaze:
- páginas: Representa el número total de páginas disponibles. Acepta el valor de tipo numérico.
- página: Representa la página actual. Acepta el valor de tipo numérico.
Método de paginación de la interfaz de usuario de Blaze:
- currentPage() : Devuelve el número de página actual.
Evento de paginación de la interfaz de usuario de Blaze:
- página (evento) : este evento se activa cuando la página cambia y regresa a la página actual.
Sintaxis : cree la paginación de la siguiente manera.
<blaze-pagination id="gfgpage" pages="8" page="1"> </blaze-pagination>
Ejemplo 1: En el siguiente ejemplo, se muestra una alerta cada vez que se produce un cambio de página.
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@x.x.x/dist/blaze/blaze.css" />
<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>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="o-container" style="padding:1em;">
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<strong>Blaze UI Pagination Events</strong>
<br />
<br />
<blaze-pagination id="gfgpag" pages="15" page="1">
</blaze-pagination>
</center>
</div>
<script>
$('#gfgpag').on('page', async function () {
let cp = await this.currentPage()
alert(`The current page is ${cp}`)
})
</script>
</body>
</html>
Producción:
Ejemplo 2 : En el siguiente ejemplo, tenemos dos paginaciones con el evento de página.
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@x.x.x/dist/blaze/blaze.css" />
<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>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="o-container" style="padding:1em;">
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<strong>Blaze UI Pagination Events</strong>
<br /><br />
<blaze-pagination id="gfgpag1" pages="15" page="3">
</blaze-pagination>
<blaze-pagination id="gfgpag2" pages="4" page="1">
</blaze-pagination>
</center>
</div>
<script>
$('#gfgpag1').on('page', async function () {
let cp = await this.currentPage()
alert(`The current page is ${cp} of first pagination`)
})
$('#gfgpag2').on('page', async function () {
let cp = await this.currentPage()
alert(`The current page is ${cp} of second pagination`)
})
</script>
</body>
</html>
Producción:
Referencia: https://www.blazeui.com/components/pagination/
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA