Blaze UI es un marco de código abierto de CSS. Es un conjunto de herramientas de interfaz de usuario liviano y 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. Su proyecto está disponible en código abierto, por lo que una gran comunidad lo mantiene.
En este artículo, veremos los árboles de la interfaz de usuario de Blaze expandibles y expandidos . Blaze UI es un conjunto de herramientas de interfaz de usuario gratuito y de código abierto para crear un excelente sitio web. Le brinda varias características como capacidad de respuesta, componentes personalizados, etc. Los árboles brindan a los usuarios una estructura jerárquica similar a un árbol desde la cual pueden mostrar varias listas de elementos con subelementos en ellos.
Blaze UI Trees Clases expandibles y expandidas:
- c-tree: esta clase se utiliza para crear una estructura expandible de árbol.
- c-tree__item: esta clase se usa para agregar una lista de elementos de árbol en el componente de árbol principal.
Sintaxis:
<div role="tree" class="c-tree">
<button role="treeitem" aria-expanded="false"
class="c-tree__item">Directory 1</button>
<button role="treeitem" aria-expanded="false"
class="c-tree__item">Directory 2</button>
<div role="tree" class="c-tree">
<span role="treeitem" class="c-tree__item">File 1</span>
<span role="treeitem" class="c-tree__item">File 2</span>
</div>
</div>
Ejemplo 1: El siguiente ejemplo demuestra los árboles ampliados.
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>Blaze UI</title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> </head> <body> <div class="o-container o-container--medium"> <h1 style="color: green">GeeksforGeeks</h1> <h2>Blaze UI Trees Expandable and Expanded </h2> <div role="tree" class="c-tree"> <button role="treeitem" aria-expanded="false" class="c-tree__item">Programming</button> <button role="treeitem" aria-expanded="false" class="c-tree__item">Databases</button> <button role="treeitem" aria-expanded="true" class="c-tree__item">Data Structures</button> <div role="tree" class="c-tree"> <span role="treeitem" class="c-tree__item"> Arrays </span> <span role="treeitem" class="c-tree__item"> Linked List </span> <span role="treeitem" class="c-tree__item"> Stacks </span> </div> <button role="treeitem" aria-expanded="false" class="c-tree__item"> Competitive Programming </button> <button role="treeitem" aria-expanded="false" class="c-tree__item">Jobs</button> <div role="tree" class="c-tree"> <span role="treeitem" class="c-tree__item u-text--quiet"> (empty) </span> </div> </div> </div> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo demuestra que los árboles son expandibles.
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>Blaze UI</title>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"/>
<style>
ul, #myUL {
list-style-type: none;
}
.caret::before {
content: "\25B6";
color: black;
display: inline-block;
margin-right: 6px;
}
.nested {
display: none;
}
.active {
display: block;
}
</style>
</head>
<body>
<div class="o-container o-container--medium">
<h1 style="color: green">GeeksforGeeks</h1>
<h2>Blaze UI Trees Expandable and Expanded</h2>
<div role="tree" id="myUL" class="c-tree">
<button role="treeitem" aria-expanded="false"
class="c-tree__item caret">Courses</button>
<ul class="nested">
<button role="treeitem" aria-expanded="false"
class="c-tree__item caret">Self Paced</button>
<ul class="nested">
<span role="treeitem" class="c-tree__item">
DSA Self Paced
</span>
<span role="treeitem" class="c-tree__item">
SDE Theory
</span>
</ul>
</ul>
</li>
<button role="treeitem" aria-expanded="false"
class="c-tree__item caret">Tutorials</button>
<button role="treeitem" aria-expanded="false"
class="c-tree__item caret">Articles</button>
</div>
<!-- For toggling the tree lists -->
<script>
var toggler = document.getElementsByClassName("caret");
var i;
for (i = 0; i < toggler.length; i++) {
toggler[i].addEventListener("click", function() {
this.parentElement.querySelector(".nested")
.classList.toggle("active");
this.classList.toggle("caret-down");
});
}
</script>
</div>
</body>
</html>
Producción:
Referencia: https://www.blazeui.com/components/trees
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA