SbTreeViewNode

An individual node component used internally by SbTreeView to render tree items recursively.

Type Parameters

Parameter	Description
TItem	The type of item in the tree

Parameters

Parameter	Type	Default	Description
Item	TItem	required	The item to display
Level	int	0	Nesting level (0 for root)
ChildSelector	Func<TItem, IEnumerable<TItem>>	Returns empty	Function to get child items
TextSelector	Func<TItem, string>	ToString()	Function to get item display text
IconSelector	Func<TItem, string?>?	null	Function to get item icon name
IsExpandedSelector	Func<TItem, bool>?	null	Function to check expansion state
IsSelectedSelector	Func<TItem, bool>?	null	Function to check selection state

Cascading Parameters

Parameter	Type	Description
Parent	SbTreeView<TItem>	Parent tree view component

CSS Classes

sb-treeview-node - Base class
sb-treeview-node--expanded - When node is expanded
sb-treeview-node__content - Content container
sb-treeview-node__content--selected - When node is selected
sb-treeview-node__toggle - Expand/collapse button
sb-treeview-node__spacer - Spacer for leaf nodes
sb-treeview-node__checkbox - Checkbox element
sb-treeview-node__icon - Icon container
sb-treeview-node__text - Text content
sb-treeview-node__chevron - Expand indicator chevron
sb-treeview-node__children - Children container

Notes

This component is typically not used directly. It's automatically created by SbTreeView for each item in the tree. However, understanding its structure helps with custom styling.

Internal Behavior

Indentation is calculated based on Level * 20 + 8 pixels
Toggle button only appears for nodes with children
Checkbox state is managed by the parent SbTreeView
Selection click triggers parent's SelectItem method
Toggle click triggers parent's ToggleItem method

Styling Examples

Custom Node Styling

/* Highlight selected nodes */
.sb-treeview-node__content--selected {
    background-color: var(--sb-color-primary-light);
    border-radius: 4px;
}

/* Custom hover effect */
.sb-treeview-node__content:hover {
    background-color: var(--sb-color-surface-hover);
}

/* Increase indentation */
.sb-treeview-node__content {
    padding-left: calc(var(--level) * 24px + 12px);
}

/* Style the expand icon */
.sb-treeview-node__chevron {
    transition: transform 0.2s ease;
}

.sb-treeview-node--expanded .sb-treeview-node__chevron {
    transform: rotate(90deg);
}

/* Style icons by type */
.sb-treeview-node[data-type="folder"] .sb-treeview-node__icon {
    color: var(--sb-color-warning);
}

.sb-treeview-node[data-type="file"] .sb-treeview-node__icon {
    color: var(--sb-color-muted);
}

Animation for Expand/Collapse

.sb-treeview-node__children {
    overflow: hidden;
    animation: expandChildren 0.2s ease-out;
}

@keyframes expandChildren {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 1000px;
    }
}

Usage Context

Since SbTreeViewNode is used internally, here's how it fits into the tree rendering:

@* This is how SbTreeView uses SbTreeViewNode internally *@
<div class="sb-treeview">
    @foreach (var item in Items)
    {
        <SbTreeViewNode TItem="TItem"
                        Item="item"
                        Level="0"
                        ChildSelector="ChildSelector"
                        TextSelector="TextSelector"
                        IconSelector="IconSelector"
                        IsExpandedSelector="IsExpandedSelector"
                        IsSelectedSelector="IsSelectedSelector" />
    }
</div>

@* SbTreeViewNode then recursively renders children *@
<div class="sb-treeview-node">
    <div class="sb-treeview-node__content">
        <button class="sb-treeview-node__toggle">▶</button>
        <span class="sb-treeview-node__icon">📁</span>
        <span class="sb-treeview-node__text">Item Name</span>
    </div>
    <div class="sb-treeview-node__children">
        @* Recursive SbTreeViewNode for each child *@
    </div>
</div>

4.2 KiB Raw Permalink Blame History