HxTreeView

Component to display 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 hierarchy data to display.
CssClass string Additional CSS class to be applied.
ItemChildrenSelector Func<TItem, IEnumerable<TItem>> Selector to display children collection for current data item. Children collection should have same type as current item.
ItemCssClass string Item CSS class (same for all items).
ItemCssClassSelector Func<TItem, string> Selector for item CSS class.
ItemIconSelector Func<TItem, IconBase> Selector to display icon from data item.
ItemInitialExpandedSelector Func<TItem, bool> Selector for initial expansion state for data item.
Default state is false (collapsed).
ItemTemplate RenderFragment<TItem> Template for the item content.
ItemTitleSelector Func<TItem, string> Selector to display item title from data item.
SelectedItem TItem Selected data item.
SelectedItemChanged EventCallback<TItem> Event fires when selected data item changes.

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-items intendation. 1rem
--hx-tree-view-item-color Item font color var(--bs-dark)
--hx-tree-view-item-icon-margin Margin of item icon. 0 .25rem 0 0;
--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 var(--bs-white)
--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 w/ and w/o children aligned 1rem
An unhandled error has occurred. Reload 🗙