Tree View

import { AXTreeViewModule } from '@acorex/components/tree-view';

Tree View component displays data in a hierarchical structure, allowing users to navigate through nested content. Ideal for representing categories, file systems, or organizational charts, it provides an intuitive way to explore and manage complex data relationships.

Overview

In this section, you can test different options of this component and see the output in real time

Node 1

Node 2

Usage

A simple example of using ax-tree-view

Preview

Code

Design Tokens

Design tokens are variables that define the visual style of ACoreX components. You can use them to change colors, typography, spacing, and other visual aspects.

Default component colors use system surface colors.

--ax-comp-tree-view-arrow-size	0.875rem	defines the size of the arrow icons used in tree view components. It ensures consistent scaling of the expand/collapse indicators in the tree structure.
--ax-comp-tree-view-text-size	0.875rem	this variable sets the font size of the text displayed within tree view components. It ensures consistent typography and readability throughout the tree structure.
--ax-comp-tree-view-active-bg-color	var(--ax-sys-color-primary-surface)	A CSS custom property (variable) that defines the background color for the active item in a tree view component. It visually highlights the currently selected or focused item, providing clear feedback to the user.
--ax-comp-tree-view-active-text-color	var(--ax-sys-color-on-primary-surface)	A CSS custom property (variable) that specifies the text color for the active item in a tree view component. It ensures the text is legible and stands out against the background color of the active item, improving user navigation and interaction.
--ax-comp-tree-view-hover-bg-color	var(--ax-sys-color-dark-surface)	A CSS custom property (variable) that defines the background color of a tree view item when hovered over. It provides a visual cue to the user, indicating the item being interacted with, improving the overall usability of the tree view component.