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;
}
}