147 lines
4.2 KiB
Markdown
147 lines
4.2 KiB
Markdown
# 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
|
|
|
|
```css
|
|
/* 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
|
|
|
|
```css
|
|
.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:
|
|
|
|
```razor
|
|
@* 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>
|
|
```
|