Add support for a tab change callback in the CodeTabs component

This commit is contained in:
Thorsten Sommer 2025-05-30 11:16:34 +02:00
parent b1eefcadb2
commit 7debfa7b9f
Signed by: tsommer
GPG Key ID: 371BBA77A02C0108
2 changed files with 11 additions and 1 deletions

View File

@ -1,4 +1,4 @@
<MudTabs @bind-ActivePanelIndex="this.SelectedIndex" PanelClass="code-block" MinimumTabWidth="30px" Class="mt-2"> <MudTabs ActivePanelIndex="this.SelectedIndex" ActivePanelIndexChanged="async idx => await this.TabChanged(idx)" PanelClass="code-block" MinimumTabWidth="30px" Class="mt-2">
@foreach (var block in this.blocks) @foreach (var block in this.blocks)
{ {
<MudTabPanel Text="@block.Title"> <MudTabPanel Text="@block.Title">

View File

@ -10,6 +10,9 @@ public partial class CodeTabs : ComponentBase
[Parameter] [Parameter]
public int SelectedIndex { get; set; } public int SelectedIndex { get; set; }
[Parameter]
public EventCallback<int> SelectedIndexChanged { get; set; }
private readonly List<CodeTabItem> blocks = new(); private readonly List<CodeTabItem> blocks = new();
internal void RegisterBlock(string title, RenderFragment fragment) internal void RegisterBlock(string title, RenderFragment fragment)
@ -29,4 +32,11 @@ public partial class CodeTabs : ComponentBase
public RenderFragment Fragment { get; init; } = null!; public RenderFragment Fragment { get; init; } = null!;
} }
private async Task TabChanged(int index)
{
this.SelectedIndex = index;
await this.SelectedIndexChanged.InvokeAsync(index);
await this.InvokeAsync(this.StateHasChanged);
}
} }