Blaze UI es un kit de herramientas de interfaz de usuario ligero de código abierto de CSS 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.
Las pestañas de la interfaz de usuario de Blaze son útiles para crear contenido con pestañas donde podemos separar el contenido en función de alguna división. Son fáciles y útiles para alternar entre diferentes contenidos sin saltar de una página a otra o alrededor de la página web.
Atributos de la pestaña de la interfaz de usuario de Blaze:
- type: Este atributo pregunta por el color de la pestaña.
- open: necesitamos especificar la pestaña que debe estar abierta en la primera carga.
- disabled: esto toma un valor booleano y configura las pestañas para que no se abran.
- header: Necesitamos pasar el nombre de la pestaña.
Métodos de la pestaña de la interfaz de usuario de Blaze:
- currentTab(): este método devuelve la pestaña abierta actual.
- openTab(): este método toma el índice de la pestaña y lo abre.
Fichas CSS de la interfaz de usuario de Blaze:
- Pestañas básicas: es un tipo básico de pestaña que se puede usar para cambiar el contenido en diferentes páginas.
- Fichas de colores: Se utiliza para crear fichas de colores. Para crear las pestañas de color, usaremos clases de color.
- Pestañas activas: Se utiliza para crear una pestaña activa.
Sintaxis:
<blaze-tabs>
<blaze-tab type="brand" header="..." open>
...
</blaze-tab>
<blaze-tab header="...">
...
</blaze-tab>
</blaze-tabs>
Ejemplo 1: En el siguiente ejemplo, tenemos tres pestañas con algo de contenido.
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 Tabs </strong> <br> <br> <blaze-tabs> <blaze-tab type="brand" header="Data Structures" open> <h4>Data Structures</h4> <ul style="list-style-type: none;"> <li>Stack</li> <li>Queue</li> <li>Array</li> </ul> </blaze-tab> <blaze-tab header="Algorithms" type="info"> <h4>Algorithms</h4> <ul style="list-style-type: none;"> <li>Searching</li> <li>Sorting</li> <li>Greedy</li> </ul> </blaze-tab> <blaze-tab header="Languages" type="success"> <h4>Languages</h4> <ul style="list-style-type: none;"> <li>Java</li> <li>C++</li> <li>Python3</li> </ul> </blaze-tab> </blaze-tabs> </center> </div> </body> </html>
Producción:
Pestañas de la interfaz de usuario de Blaze
Ejemplo 2: En el siguiente ejemplo, verificaremos el número de pestaña que está abierta actualmente utilizando los métodos de pestaña.
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 Tabs </strong>
<br> <br>
<button class="c-button c-alert--warning"
onclick="checkCurrent()">
Check Current Open Tab
</button>
<blaze-tabs id="tabs">
<blaze-tab type="brand" header="Data Structures" open>
<h4>Data Structures</h4>
<ul style="list-style-type: none;">
<li>Stack</li>
<li>Queue</li>
<li>Array</li>
</ul>
</blaze-tab>
<blaze-tab header="Algorithms" type="info">
<h4>Algorithms</h4>
<ul style="list-style-type: none;">
<li>Searching</li>
<li>Sorting</li>
<li>Greedy</li>
</ul>
</blaze-tab>
<blaze-tab header="Languages" type="success">
<h4>Languages</h4>
<ul style="list-style-type: none;">
<li>Java</li>
<li>C++</li>
<li>Python3</li>
</ul>
</blaze-tab>
</blaze-tabs>
</center>
</div>
<script>
const checkCurrent = async () => {
let tab = await $('#tabs').get(0).currentTab()
alert(`The current opened tab index is ${tab + 1}`)
}
</script>
</body>
</html>
Producción:
Pestañas de la interfaz de usuario de Blaze
Referencia: https://www.blazeui.com/components/tabs/
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA