I have four tabs in my tab strip, and the content in each tab is of varying width. The tab item resizes to the width of the content as it changes. I want to be able to set a fixed width for all the tabs so they don't expand and contract all the time.
===========
ADMIN EDIT
===========
In the meantime, you can control the width of the TabStrip with some custom CSS. You can use its Class parameter to set a custom CSS class to the main wrapping container of the component and then apply the desired styles. Thus, you will be styling only this specific instance of the TabStrip and not all instances on the page/app (in case needed, you can of course add the same CSS class to all instances to have the same styles).
The sample below demonstrates the described approach. First instance of the TabStrip has the default setup, no additional styles added. Second instance has fixed width.
<TelerikTabStrip>
<TabStripTab Title="First">
First tab content. Go to the third tab to see the problem.
</TabStripTab>
<TabStripTab Title="Second tab heading longer than others">
Second tab content. Go to the third tab to see the problem.
</TabStripTab>
<TabStripTab Title="Third">
<div style="width: 2000px;">lorem ipsum</div>Third tab content.
</TabStripTab>
</TelerikTabStrip>
<style>
.tab-with-width {
width: 600px;
}
</style>
<TelerikTabStrip Class="tab-with-width">
<TabStripTab Title="First">
First tab content. Go to the third tab to see the behavior when the TapSrtrip has fixed width.
</TabStripTab>
<TabStripTab Title="Second tab heading longer than others">
Second tab content. Go to the third tab to see the behavior when the TapSrtrip has fixed width.
</TabStripTab>
<TabStripTab Title="Third">
<div style="width: 2000px;">lorem ipsum</div>Third tab content.
</TabStripTab>
</TelerikTabStrip>
G'day
Just wondering if we can get an;
AllowDragReorder="true"
And added bonus; "OnDragReorder" event.
Similar to Telerik WPF;
Cheers
Phil
Hi All,
I want to build a TabStip with many Tabs in multiline header like this:
, but now all headers located in a long line as shows below:
I could not found any attribute or a HeaderTemplate example to do this.
Can you please help me to do this?
I want to style my tab headers with something similar to this, but it does not compile:
<h2>Telerik Tab Strip</h2>
<TelerikTabStrip TabPosition="Telerik.Blazor.TabPosition.Top">
<TabStripTab Class="WeirdTab" Title="First">
First tab content.
</TabStripTab>
<TabStripTab Title="Second">
Second tab content.
</TabStripTab>
<TabStripTab Title="Third">
Third tab content.
</TabStripTab>
</TelerikTabStrip>
<style>
.WeirdTab {
color: red;
}
</style>
While I can style the content of the tabs in the tabs themlselves (see below) I'd like to be able to style the headers too
<h2>Telerik Tab Strip</h2>
<TelerikTabStrip TabPosition="Telerik.Blazor.TabPosition.Top">
<TabStripTab Title="First">
<div class="WeirdTab">
First tab content.
</div>
</TabStripTab>
<TabStripTab Title="Second">
Second tab content.
</TabStripTab>
<TabStripTab Title="Third">
Third tab content.
</TabStripTab>
</TelerikTabStrip>
<style>
.WeirdTab {
color: red;
}
</style>
Support for adding Unicode characters (such as a warning sign, ⚠) to the Title of tab strips.
Our scenario is we require specific setup to be done on each tab strip. We would like to ability to add an indicator next to the title of the tab to denote that setup is required.
The ActiveTabIndex parameter can take a value -1 to denote that no tab should be selected. This can plug into the current two-way binding as well.
<TelerikTabStrip TabPosition="TabPosition.Top">
<TabStripTab Title="Sofia">
</TabStripTab>
<TabStripTab Title="London">
</TabStripTab>
<TabStripTab Title="Paris">
<TelerikTabStrip TabPosition="TabPosition.Left">
@foreach (var item in new string[] { "one", "two", "three" })
{
<TabStripTab Title="@item">x</TabStripTab>
}
</TelerikTabStrip>
</TabStripTab>
</TelerikTabStrip>
Content inside the tabs is narrow and elements float next to each other. For example, charts or other divs have limited width (screenshot of the issue at the end of this post).
@using Telerik.Blazor
@using Telerik.Blazor.Components.Chart
@using Telerik.Blazor.Components.TabStrip
@*WORKAROUND 1*@
<
style
>
.k-tabstrip .k-animation-container-relative {
width: 100%;
}
</
style
>
@*WORKAROUND 2
<
style
>
.k-tabstrip .k-animation-container-relative {
display: block;
}
</
style
>*@
<
TelerikTabStrip
>
<
TelerikTab
Title
=
"First"
>
First tab content.
<
div
style
=
"border: 1px solid red;"
>some div that must be as wide as the tab strip</
div
>
Chart follows and it should also be as wide as the tab
<
TelerikChart
>
<
TelerikChartSeriesItems
>
<
TelerikChartSeries
Type
=
"ChartSeriesType.Line"
Name
=
"Product 1"
Data
=
"@series1Data"
>
</
TelerikChartSeries
>
<
TelerikChartSeries
Type
=
"ChartSeriesType.Line"
Name
=
"Product 2"
Data
=
"@series2Data"
>
</
TelerikChartSeries
>
</
TelerikChartSeriesItems
>
<
TelerikChartCategoryAxes
>
<
TelerikChartCategoryAxis
Categories
=
"@xAxisItems"
></
TelerikChartCategoryAxis
>
</
TelerikChartCategoryAxes
>
<
TelerikChartTitle
Text
=
"Quarterly revenue per product"
></
TelerikChartTitle
>
<
TelerikChartLegend
Position
=
"ChartLegendPosition.Right"
>
</
TelerikChartLegend
>
</
TelerikChart
>
</
TelerikTab
>
<
TelerikTab
Title
=
"Second"
Disabled
=
"true"
>
Second tab content. This tab is disabled and you cannot select it.
</
TelerikTab
>
<
TelerikTab
Title
=
"Third"
>
Third tab content.
</
TelerikTab
>
</
TelerikTabStrip
>
<
TelerikChart
>
<
TelerikChartSeriesItems
>
<
TelerikChartSeries
Type
=
"ChartSeriesType.Line"
Name
=
"Product 1"
Data
=
"@series1Data"
>
</
TelerikChartSeries
>
<
TelerikChartSeries
Type
=
"ChartSeriesType.Line"
Name
=
"Product 2"
Data
=
"@series2Data"
>
</
TelerikChartSeries
>
</
TelerikChartSeriesItems
>
<
TelerikChartCategoryAxes
>
<
TelerikChartCategoryAxis
Categories
=
"@xAxisItems"
></
TelerikChartCategoryAxis
>
</
TelerikChartCategoryAxes
>
<
TelerikChartTitle
Text
=
"Quarterly revenue per product"
></
TelerikChartTitle
>
<
TelerikChartLegend
Position
=
"ChartLegendPosition.Right"
>
</
TelerikChartLegend
>
</
TelerikChart
>
@code {
public List<
object
> series1Data = new List<
object
>() { 10, 2, 5, 6 };
public List<
object
> series2Data = new List<
object
>() { 5, 8, 2, 7 };
public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" };
}
At the moment, you can't get the currently active tab with code, the Title property of the tabs is not public.
Ideally, something like this should work:
@
using
Telerik.Blazor.Components.TabStrip
@
using
Telerik.Blazor.Components.Button
<TelerikButton OnClick=
"@WriteActiveTab"
>Get Active Tab</TelerikButton>
<TelerikTabStrip TabPosition=
"Telerik.Blazor.Components.TabStrip.TabPosition.Left"
ref
=
"@myTabStrip"
>
<TelerikTab Title=
"First"
>
First tab content.
</TelerikTab>
<TelerikTab Title=
"Second"
Disabled=
"true"
>
Secont tab content. This tab
is
disabled and you cannot select it.
</TelerikTab>
<TelerikTab Title=
"Third"
>
Third tab content.
</TelerikTab>
</TelerikTabStrip>
@functions {
Telerik.Blazor.Components.TabStrip.TelerikTabStrip myTabStrip;
protected
void
WriteActiveTab()
{
Console.WriteLine(myTabStrip.ActiveTab.Title);
//Title is not available now
}
}
ADMIN EDIT: As of October 2023, the TabStrip supports getting and setting the active tab with the ActiveTabIndex parameter. This request was marked as Complete when we exposed a Title parameter for the TabStripTab component. Enhanced programmatic access to TabStrip tab IDs can be implemented as part of TabStrip dynamic (closable) tabs.