Blaze UI es un kit de herramientas de interfaz de usuario de código abierto sin marco. Proporciona una gran base para construir sitios web escalables más rápido. Blaze UI viene con una gran cantidad de componentes prediseñados y muchas utilidades para que los desarrolladores no tengan que crear todo desde cero. Todos sus componentes se basan únicamente en las funciones nativas del navegador, por lo que se puede usar sin ninguna biblioteca o marco. En este artículo, veremos los métodos de paginación de la interfaz de usuario de Blaze .
El método currentPage() devuelve una Promesa que se resuelve en un valor numérico que hace referencia al índice (a partir de 1) de la página seleccionada actualmente.
Sintaxis:
document.querySelector(".selector").currentPage();
Ejemplo 1: Este ejemplo ilustra el uso del método currentPage() para obtener el índice de la página seleccionada actualmente.
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 Methods - Blaze UI</title>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css">
<!-- We need the Blaze UI Javascript because
we are using a component which requires
js to work -->
<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 - currentPage() Method</h3>
<div class="u-window-box-large">
<blaze-pagination id="pagination1"
pages="11" page="1">
</blaze-pagination>
<p>Current Page Index: <span id="result"></span></p>
<button class="c-button c-button--info"
onclick="getCurrentPageNumber()">
Get Current Page Number
</button>
</div>
<script>
function getCurrentPageNumber() {
document.querySelector("#pagination1")
.currentPage().then(function (currentPageIndex) {
document.querySelector("#result")
.innerText = currentPageIndex;
});
}
</script>
</body>
</html>
Producción:
Referencia: https://www.blazeui.com/components/pagination/
Publicación traducida automáticamente
Artículo escrito por prakhara306 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA