HxTreeView

Component to display hierarchy data structure.

Basic usage

C:\
D:\

Directory C:\ selected.

Custom content #

C:\
3
Program Files
4
Users
4
Data
3
D:\
2

No directory selected.

API

Parameters

Name Type Description
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).
REQUIREDItems IEnumerable<TItem> Collection of hierarchy data to display.
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. 3px
--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 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 🗙