Open In App

Blaze UI Trees

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 25 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads