feat(ui): add selection support to TreeView (R5)
This commit is contained in:
@@ -26,17 +26,18 @@ else
|
||||
var isExpanded = _expandedKeys.Contains(key);
|
||||
|
||||
<li role="treeitem" @key="key"
|
||||
aria-expanded="@(isBranch ? (isExpanded ? "true" : "false") : null)">
|
||||
<div class="tv-row" style="padding-left: @(depth * IndentPx)px">
|
||||
aria-expanded="@(isBranch ? (isExpanded ? "true" : "false") : null)"
|
||||
aria-selected="@(Selectable && SelectedKey != null && SelectedKey.Equals(key) ? "true" : null)">
|
||||
<div class="tv-row @(Selectable && SelectedKey != null && SelectedKey.Equals(key) ? SelectedCssClass : "")" style="padding-left: @(depth * IndentPx)px">
|
||||
@if (isBranch)
|
||||
{
|
||||
<span class="tv-toggle" @onclick="() => ToggleExpand(key)">@(isExpanded ? "\u2212" : "+")</span>
|
||||
<span class="tv-toggle" @onclick="() => ToggleExpand(key)" @onclick:stopPropagation>@(isExpanded ? "\u2212" : "+")</span>
|
||||
}
|
||||
else
|
||||
{
|
||||
<span class="tv-spacer"></span>
|
||||
}
|
||||
<span class="tv-content">
|
||||
<span class="tv-content" @onclick="() => OnContentClick(key)" @onclick:stopPropagation>
|
||||
@NodeContent(item)
|
||||
</span>
|
||||
</div>
|
||||
@@ -67,6 +68,10 @@ else
|
||||
[Parameter] public int IndentPx { get; set; } = 24;
|
||||
[Parameter] public bool ShowGuideLines { get; set; } = true;
|
||||
[Parameter] public Func<TItem, bool>? InitiallyExpanded { get; set; }
|
||||
[Parameter] public bool Selectable { get; set; }
|
||||
[Parameter] public object? SelectedKey { get; set; }
|
||||
[Parameter] public EventCallback<object?> SelectedKeyChanged { get; set; }
|
||||
[Parameter] public string SelectedCssClass { get; set; } = "bg-primary bg-opacity-10";
|
||||
|
||||
protected override void OnParametersSet()
|
||||
{
|
||||
@@ -103,4 +108,12 @@ else
|
||||
_expandedKeys.Add(key);
|
||||
}
|
||||
}
|
||||
|
||||
private async Task OnContentClick(object key)
|
||||
{
|
||||
if (Selectable)
|
||||
{
|
||||
await SelectedKeyChanged.InvokeAsync(key);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user