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:\
3Program Files
4Visual Studio 2022
Rider 2021.3
VS Code
Borland Pascal
Users
4Adam
Bill
Jane
Simon
Data
3Open Office
Git
Autocad
D:\
2Games
4Cyberpunk 2077
The Witcher 3
Tetris
Little Big Adventure 2: Twinsen's Odyssey
Music
3Queen
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. |
| OnItemCollapsed | EventCallback<TItem> |
Event fires when collapsing an item. |
| OnItemExpanded | EventCallback<TItem> |
Event fires when expanding an 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-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 w/ and w/o children aligned. | 1rem |