Blaze UI es un kit de herramientas de interfaz de usuario de código abierto gratuito que proporciona una excelente estructura para crear sitios web rápidamente con una base escalable y mantenible. Todos los componentes de la interfaz de usuario de Blaze se desarrollan primero para dispositivos móviles y se basan únicamente en las funciones nativas del navegador, no en una biblioteca o marco por separado. Nos ayuda a crear un sitio web escalable y receptivo de manera rápida y eficiente con un estilo consistente.
En este artículo, veremos los métodos de pestañas de Blaze UI . Hay dos métodos para el componente Tab que se analizan a continuación.
Métodos de pestañas de la interfaz de usuario de Blaze:
- Blaze UI Tabs currentTab() Method: este método se usa para obtener el índice de la pestaña actualmente abierta del componente Tab.
Sintaxis:
document.querySelector(".selector").currentTab();
- Blaze UI Tabs openTab(tabIndex: número) Método: El método openTab se utiliza para abrir una pestaña mediante programación. Este método toma un argumento de tipo número, que es el índice de la pestaña a abrir.
Sintaxis:
document.querySelector(".selector").openTab(tabIndex);
Ejemplo 1: este ejemplo muestra el uso del método de pestaña actual para obtener el índice de la pestaña abierta 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">
<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>
<script nomodule=""
src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js">
</script>
<style>
body {
font-family: sans-serif;
}
</style>
</head>
<body>
<div class="u-centered">
<h2 style="color:green;">
GeeksforGeeks
</h2>
<h3>Tabs Methods - Blaze UI</h3>
</div>
<div class="u-window-box-super">
<blaze-tabs id="tabgroup1">
<blaze-tab header="Tab 1">
This is Tab 1
</blaze-tab>
<blaze-tab header="Tab 2" open>
This is Tab 2
</blaze-tab>
<blaze-tab header="Tab 3">
This is Tab 3
</blaze-tab>
<blaze-tab header="Tab 4">
This is Tab 4
</blaze-tab>
</blaze-tabs>
<div class="u-centered">
<button class="c-button"
onclick="getCurrentTab();">
Check current tab
</button>
<p>
The index of current tab is:
<b><span id="result"></span></b>
</p>
</div>
</div>
<script>
function getCurrentTab() {
document.querySelector("#tabgroup1")
.currentTab().then(function (result) {
document.querySelector("#result")
.innerText = result;
});
}
</script>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo muestra el uso del método openTab para abrir una pestaña mediante programación.
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>
<script nomodule=""
src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js">
</script>
<style>
body {
font-family: sans-serif;
}
</style>
</head>
<body>
<div class="u-centered">
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>Tabs Methods - Blaze UI</h3>
</div>
<div class="u-window-box-super">
<blaze-tabs id="tabgroup1">
<blaze-tab header="Tab 1">
This is Tab 1
</blaze-tab>
<blaze-tab header="Tab 2" open>
This is Tab 2
</blaze-tab>
<blaze-tab header="Tab 3">
This is Tab 3
</blaze-tab>
<blaze-tab header="Tab 4">
This is Tab 4
</blaze-tab>
</blaze-tabs>
<div class="u-centered">
<button class="c-button" onclick="openTab1()">
Open Tab 1
</button>
<button class="c-button" onclick="openTab2()">
Open Tab 2
</button>
<button class="c-button" onclick="openTab3()">
Open Tab 3
</button>
<button class="c-button" onclick="openTab4()">
Open Tab 4
</button>
</div>
</div>
<script>
function openTab1() {
document.querySelector("#tabgroup1").openTab(0);
}
function openTab2() {
document.querySelector("#tabgroup1").openTab(1);
}
function openTab3() {
document.querySelector("#tabgroup1").openTab(2);
}
function openTab4() {
document.querySelector("#tabgroup1").openTab(3);
}
</script>
</body>
</html>
Producción:
Referencia: https://www.blazeui.com/components/tabs
Publicación traducida automáticamente
Artículo escrito por prakhara306 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA