Tree View
A pure vanilla JS implementation of Zag JS Tree View
Anatomy
The Tree View component consists of the following data-part
root
tree
branch
branch-control
branch-text
branch-indicator
branch-content
branch-indent-guide
item
It can include multiple branch, branch-control, branch-text, branch-indicator, branch-content, branch-indent-guide and item parts.
data-id
and data-name
are required on all branch
parts and items
The collection is dynamically generated from the html structure of the item and branch parts
Tree View Label
Data attributes
Each tree-view can be set with different settings with the following data-attribute.
Tree View Label
Callbacks
Each Tree View component can receive callbacks that can be used to respond to user interaction with custom behavior.
You must add a custom id for the toggle group and a event listener for your event name
document.getElementById("my-callback-tree-view")
?.addEventListener("my-callback-tree-view-event", (event) => {
console.log("Received event:", (event as CustomEvent).detail);
});
Tree View Label
Open your browser's console to see the events received when the tree is opened or closed
RTL
RTL support for tree-view
Tree View Label
Custom (Tailwind)
If you are using Tailwind styling, you can customize each tree-view and its parts with Tailwind utilities
Tree View Label
Templates
Tree View components is available in the followng templates
-
Corex template
Default corex templates. It provides the global, semantic and components tokens
-
Modex template
Based on Corex default template, it adds dark and light mode option to the tokens
-
Themex template
Based on the Corex default template, it adds theming capabilities as well as light and dark mode options to the tokens.