Remove Tab
Environment
Product | TabStrip for Blazor |
Description
I want a close button on my tabs so the use can remove (close) them. When that happens, I want to have the previous tab selected instead of no tab.
Solution
Use the HeaderTemplate of the tabs to add the desired close button
Have conditional logic to display only the tab you want (for example, loop over a collection of tab descriptor classes, see an example in this sample project).
Handle the
ActiveTabIndexChanged
event explicitly to update the selected tab indexIn the Close button click handler, raise a flag to suppress the view-model update by the
ActiveTabIndexChanged
event handler - the TabStrip component will raise this event with an index of-1
when you remove a tab because it will no longer have a selected tab
Close button on a tab
Currently active tab index: @ActiveTabIndex
<TelerikTabStrip ActiveTabIndex="@ActiveTabIndex" ActiveTabIndexChanged="@TabIndexChangedHandler">
<TabStripTab Title="static one">
The static tab
</TabStripTab>
@{
foreach (TabModel tab in Tabs)
{
<TabStripTab Title="@tab.Title">
<HeaderTemplate>
<strong>@tab.Title</strong>
<button type="button" class="close ml-1" aria-label="Close" @onclick="@( () => CloseTab(tab))">
<span aria-hidden="true">×</span>
</button>
</HeaderTemplate>
<Content>
Content for tab @tab.Title
</Content>
</TabStripTab>
}
}
</TelerikTabStrip>
@code{
int ActiveTabIndex { get; set; } // we use it to set the new index we want active
bool suppressActiveIndexChange { get; set; } // the flag to suppress the view-model update
// sample collection of tab descriptors
List<TabModel> Tabs = new List<TabModel>()
{
new TabModel { Title = "One" },
new TabModel { Title = "Two" },
new TabModel { Title = "Three" }
};
protected void CloseTab(TabModel tab)
{
// use a flag to avoid the automatic change that will happen
suppressActiveIndexChange = true;
// update the active tab index only if needed - closing tabs to the right will not affect the current index
if (Tabs.IndexOf(tab) <= ActiveTabIndex)
{
ActiveTabIndex = ActiveTabIndex > 0 ? ActiveTabIndex - 1 : 0;
}
Tabs.Remove(tab);
}
void TabIndexChangedHandler(int currIndex)
{
if (!suppressActiveIndexChange)
{
ActiveTabIndex = currIndex;
}
suppressActiveIndexChange = false;
}
public class TabModel
{
public string Title { get; set; }
// add more fields here to use in a more complex layout and child components
}
}