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 fácil de mantener. 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.
Blaze UI Trees es un componente que se ha utilizado para crear patrones de directorio basados en la estructura de árbol, como todos sabemos, un directorio basado en estructura de árbol es útil para rastrear el archivo real.
Clases de árboles de interfaz de usuario de Blaze:
- c-tree: esta clase se utiliza para crear la estructura de árbol del directorio.
- c-tree__item: Esta clase se utiliza para definir los elementos del árbol.
Nota: Para crear un árbol, necesitamos definir el rol del elemento como elemento del árbol.
Sintaxis:
<div role="tree" class="c-tree">
<button role="treeitem" class="c-tree__item">...</button>
<div role="tree" class="c-tree">
<span role="treeitem" class="c-tree__item">...</span>
...
</div>
</div>
El siguiente ejemplo ilustra los árboles de la interfaz de usuario de Blaze.
Ejemplo 1:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Blaze UI</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> </head> <body> <center> <h1 style="color:green">GeeksforGeeks</h1> <strong>Blaze UI Trees</strong> </center> <div role="tree" class="c-tree"> <button role="treeitem" aria-expanded="false" class="c-tree__item">HTML</button> <button role="treeitem" aria-expanded="true" class="c-tree__item">CSS</button> <div role="tree" class="c-tree"> <span role="treeitem" class="c-tree__item">Bootstrap</span> <span role="treeitem" class="c-tree__item">Tailwind</span> <span role="treeitem" class="c-tree__item">Semantic UI</span> <span role="treeitem" class="c-tree__item">Blaze UI</span> </div> <button role="treeitem" aria-expanded="false" class="c-tree__item">JavaScript</button> <button role="treeitem" aria-expanded="true" class="c-tree__item">MongoDB</button> <div role="tree" class="c-tree"> <span role="treeitem" class="c-tree__item"> <a href="#">Learn More</a> </span> </div> </div> </body> </html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blaze UI</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css">
<style>
body{
margin-left:15px;
margin-right:15px;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<strong>Blaze UI Trees</strong>
</center>
<div role="tree" class="c-tree u-centered">
<button role="treeitem" aria-expanded="false" class="c-tree__item">
HTML
</button>
<button role="treeitem" aria-expanded="true" class="c-tree__item">
CSS
</button>
<div role="tree" class="c-tree">
<span role="treeitem" class="c-tree__item">
Blaze UI: Blaze UI is a free open source UI Toolkit that</br>
provides a great structure for building websites quickly</br>
with a scalable and maintainable foundation.</br>
</span>
</div>
<button role="treeitem" aria-expanded="false" class="c-tree__item">
JavaScript
</button>
<button role="treeitem" aria-expanded="true" class="c-tree__item">
MongoDB
</button>
</div>
</body>
</html>
Producción:
Referencia: https://www.blazeui.com/components/trees
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA