HxTreeView #

Component to display a hierarchy data structure.

Basic usage #

C:\
Program Files
Visual Studio 2022
Rider 2021.3
VS Code
Borland Pascal
Users
Vladimir
Jhosav
Ben
Admin
Data
Open Office
Git
Autocad
D:\
Games
Cyberpunk 2077
The Witcher 3
Tetris
Little Big Adventure 2: Twinsen's Odyssey
Music
Queen
Live Killers
Live Magic
Metallica
AC/DC
Images

Directory C:\ selected.

Custom content #

C:\
3
Program Files
4
Visual Studio 2022
Rider 2021.3
VS Code
Borland Pascal
Users
4
Adam
Bill
Jane
Simon
Data
3
Open Office
Git
Autocad
D:\
2
Games
4
Cyberpunk 2077
The Witcher 3
Tetris
Little Big Adventure 2: Twinsen's Odyssey
Music
3
Queen
Metallica
AC/DC

No directory selected.

API #

Parameters #

Name Type Description
ItemsREQUIRED IEnumerable<TItem> Collection of hierarchical data to display.
CssClass string Additional CSS class to be applied.
ItemChildrenSelector Func<TItem, IEnumerable<TItem>> Selector to display the children collection for the current data item. The children collection should have the same type as the current item.
ItemCssClass string Item CSS class (same for all items).
ItemCssClassSelector Func<TItem, string> Selector for the item CSS class.
ItemIconSelector Func<TItem, IconBase> Selector to display the icon from the data item.
ItemInitialExpandedSelector Func<TItem, bool> Selector for the initial expansion state of the data item.
The default state is false (collapsed).
ItemTemplate RenderFragment<TItem> Template for the item content.
ItemTitleSelector Func<TItem, string> Selector to display the item title from the data item.
SelectedItem TItem Selected data item.
SelectedItemChanged EventCallback<TItem> Event fired when the selected data item changes.

Event callbacks #

Name Type Description
OnItemCollapsed EventCallback<TItem> Event fired when an item is collapsed.
OnItemExpanded EventCallback<TItem> Event fired when an item is expanded.

CSS variables #

Name Description Default
--hx-tree-view-item-border-radius Border radius. .25rem
--hx-tree-view-item-border-width Border width. 0
--hx-tree-view-item-border-style Border style. unset
--hx-tree-view-item-border-color Border color. unset
--hx-tree-view-item-spacer-width Width of spacer used for sub-item indentation. 1rem
--hx-tree-view-item-color Item font color. var(--bs-dark)
--hx-tree-view-item-gap Gap between content of the item. .25rem
--hx-tree-view-item-font-size Item font size. .75rem
--hx-tree-view-item-padding Item padding. .25rem .5rem;
--hx-tree-view-item-margin Item margin. 0 0 .125rem 0
--hx-tree-view-item-hover-color Hovered item font color. var(--bs-primary)
--hx-tree-view-item-selected-color Selected item font color. var(--bs-primary)
--hx-tree-view-item-background Item background color. transparent
--hx-tree-view-item-hover-background Hovered item background color. var(--bs-primary-rgb)
--hx-tree-view-item-selected-background Selected item background color. var(--bs-primary-rgb)
--hx-tree-view-item-hover-background-opacity Hovered/selected item background color opacity. .1
--hx-tree-view-expander-container-width Width of expander container to make items with and without children aligned. 1rem
An unhandled error has occurred. Reload 🗙