Blaze UI Trees
Blaze UI is a free open source UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us to create a scalable and responsive website fast and efficiently with a consistent style.
Blaze UI Trees is a component that has been used to create tree structure-based directory patterns, as we all know a tree-structured based directory is useful to track down the actual file.
Blaze UI Trees Classes:
- c-tree: This class is used to create the tree structure of the directory.
- c-tree__item: This class is used to define the tree items.
Note: To create a tree, we need to define the role of the element as a tree item.
Syntax:
<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>The below example illustrates the Blaze UI Trees.
Example 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=</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> |
Output:
Example 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= <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> |
Output:
Reference: https://www.blazeui.com/components/trees
Please Login to comment...