TabStrip Tabs Configuration
You can configure the TabStripTab instances in a TabStrip through the following parameters:
Title
The Title parameter allows you to define the desired text that will be rendered in the Tab heading. If not set, no text will be rendered in the Tab heading.
Set the desired title for the tab heading.
<TelerikTabStrip >
<TabStripTab Title="First">
First tab content.
</TabStripTab>
<TabStripTab Title="Second">
Second tab content.
</TabStripTab>
<TabStripTab Title="Third">
Third tab content.
</TabStripTab>
</TelerikTabStrip>Visible
Control tab visibility through the Visible parameter of the TabStripTab. If you toggle the visibility at runtime, the tab order will be preserved. This is in contrast with adding a tab at runtime with a conditional statement, which adds it at last position.
Toggle the visibility of the second tab
<TelerikButton OnClick="@ToggleVisible">Toggle Second Tab Visibility</TelerikButton>
<TelerikTabStrip>
<TabStripTab Title="First" >
First tab content.
</TabStripTab>
<TabStripTab Visible="@Visible" Title="Second">
Second tab content.
</TabStripTab>
<TabStripTab Title="Third">
Third tab content.
</TabStripTab>
</TelerikTabStrip>
@code {
public bool Visible { get; set; }
public void ToggleVisible()
{
Visible = !Visible;
}
}Disabled
The Disabled parameter allows you to mark a tab as disabled, so the user cannot select it.
Disable the second tab
<TelerikButton OnClick="@ToggleDisabled">Enable/Disable Second Tab</TelerikButton>
<TelerikTabStrip>
<TabStripTab Title="First" >
First tab content.
</TabStripTab>
<TabStripTab Disabled="@Disabled" Title="Second">
Second tab content.
</TabStripTab>
<TabStripTab Title="Third">
Third tab content.
</TabStripTab>
</TelerikTabStrip>
@code {
public bool Disabled { get; set; } = true;
public void ToggleDisabled()
{
Disabled = !Disabled;
}
}Closeable
Set the Closeable parameter to true to render a close button in the tab. Users can also close the tab through a context menu action. Closing a tab sets its Visible parameter to false, which hides it from the tab list.
The VisibleChanged event fires when the tab is closed. Use this event to update your data or to intercept the close action—for example, to show a confirmation dialog before the tab is hidden.
To show a confirmation dialog before closing a tab, use
VisibleChangedto intercept the close request. Update theVisibleparameter only if the user confirms the action.
<TelerikTabStrip>
<TabStripTab Title="First" Id="tab1"
Closeable="true"
Visible="@FirstTabVisible"
VisibleChanged="@( (bool newVisible) => OnTabVisibleChanged("tab1", newVisible) )">
First tab content.
</TabStripTab>
<TabStripTab Title="Second" Id="tab2"
Closeable="true"
Visible="@SecondTabVisible"
VisibleChanged="@( (bool newVisible) => OnTabVisibleChanged("tab2", newVisible) )">
Second tab content.
</TabStripTab>
<TabStripTab Title="Third">
Third tab content.
</TabStripTab>
</TelerikTabStrip>
@code {
private bool FirstTabVisible { get; set; } = true;
private bool SecondTabVisible { get; set; } = true;
private void OnTabVisibleChanged(string tabId, bool newVisible)
{
if (tabId == "tab1") FirstTabVisible = newVisible;
if (tabId == "tab2") SecondTabVisible = newVisible;
}
}Pinnable and Pinned
The TabStripTab Pinnable parameter specifies whether users can pin a tab. Pinned tabs are fixed to the start of the tab list and cannot be mixed with unpinned tabs during reordering.
Use the tab's Pinned parameter to set the initial or runtime pinned state of a tab. Use two-way binding or the PinnedChanged event to keep the Pinned value in sync when users toggle the pin state through the context menu.
TabStrip with pinnable tabs
<TelerikTabStrip @bind-ActiveTabId="@TabStripActiveTabId"
EnableTabReorder="true">
<TabStripTab Id="alpha"
Pinnable="true"
@bind-Pinned="@AlphaPinned"
Title="Alpha">
Alpha tab content.
</TabStripTab>
<TabStripTab Id="beta"
Pinnable="true"
@bind-Pinned="@BetaPinned"
Title="Beta">
Beta tab content.
</TabStripTab>
<TabStripTab Id="gamma"
Title="Gamma">
Gamma tab content.
</TabStripTab>
</TelerikTabStrip>
@code {
private string TabStripActiveTabId { get; set; } = "alpha";
private bool AlphaPinned { get; set; }
private bool BetaPinned { get; set; } = true;
}