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:
<!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:
<!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