You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: components/tabstrip/overview.md
+22-60Lines changed: 22 additions & 60 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -12,20 +12,19 @@ position: 0
12
12
13
13
This article provides information about the <ahref = "https://www.telerik.com/blazor-ui/tabstrip"target = "_blank">Blazor TabStrip component</a> and its core features.
14
14
15
-
#### Basics
15
+
>caption In this article:
16
+
*[Basics](#basics)
17
+
*[Features](#features)
18
+
*[Example](#example)
16
19
17
-
The TabStrip is defined through the `<TelerikTabStrip>` tag that accepts children of type `<TabStripTab>`. Inside the tabs you can add content like in any other container, including other components.
20
+
## Basics
18
21
19
-
The tab exposes a `Title` attribute that is the text rendered in the heading. It also offers the `Disabled` attribute that allows you to disable its selection.
22
+
To use a Telerik TabStrip for Blazor:
20
23
21
-
The `ActiveTabIndex` parameter lets you get and set the currently shown tab index through two-way binding, and also provides an event for the tab change. To deactivate all tabs, set it to `-1`.
22
-
23
-
To control the position of the tab titles, the main TabStrip tag exposes the optional `TabPosition` attribute that takes a member of the `Telerik.Blazor.TabPosition` enumeration:
24
-
25
-
*`Top` (default)
26
-
*`Left`
27
-
*`Right`
28
-
*`Bottom`
24
+
1. Use the `<TelerikTabStrip>` tag
25
+
1. Add a nested `<TabStripTab>` tag for each tab you want to include in the component
26
+
1. Set tab titles through the `Title` parameter of the `<TabStripTab>` tags. You can additionally configure the tabs as desired - read more in the [Tabs Configuration]({%slug tabstrip-tabs-configuration%}) article
27
+
1. Place the desired content in the tabs - it can be any content, including other components
29
28
30
29
>caption A Telerik TabStrip with example reference, tab position and disabled tab
31
30
@@ -53,7 +52,18 @@ To control the position of the tab titles, the main TabStrip tag exposes the opt
53
52
54
53
55
54
56
-
>caption Get and set the selected tab index
55
+
56
+
## Features
57
+
58
+
*`Class` - the CSS class that will be rendered on the main wrapping element of the component.
59
+
*`ActiveTabIndex` - allows you get and set the currently shown tab index through two-way binding, and also provides an event for the tab change. To deactivate all tabs, set it to `-1`.
60
+
*`TabPosition` - allows you to set the desired position of the tab headers. Read more in [Tabs - Position]({%slug tabstrip-tabs-position%}) article.
61
+
*`PersistTabContent` - defines whether the tab content will remain in the DOM when the tab is inactive (`false` by default). Read more in the [Persist Content]({%slug tabstrip-persist-content%}) article.
62
+
63
+
64
+
## Example
65
+
66
+
Get and set the selected tab index
57
67
58
68
````CSHTML
59
69
Active Tab Index: @ActiveTabIndex
@@ -82,54 +92,6 @@ Active Tab Index: @ActiveTabIndex
82
92
}
83
93
````
84
94
85
-
86
-
>caption Extract information for the currently selected tab from your model. Alter the model to affect the TabStrip. Create tabs dynamically based on external data.
87
-
88
-
You can find another example with some more details in the following sample project: [Dynamic Tabs](https://github.com/telerik/blazor-ui/tree/master/tabstrip/DynamicTabs).
<TelerikButton OnClick="@( () => tabs[1].Disabled = !tabs[1].Disabled )">Toggle the Disabled state of the second tab</TelerikButton>
105
-
106
-
@code {
107
-
MarkupString result { get; set; }
108
-
void TabChangedHandler(int newIndex)
109
-
{
110
-
string tempResult = $"current tab {newIndex} selected on {DateTime.Now}";
111
-
MyTabModel currTab = tabs[newIndex];
112
-
tempResult += $"<br />the new tab has a title {currTab.Title}";
113
-
result = new MarkupString(tempResult);
114
-
}
115
-
116
-
List<MyTabModel> tabs = new List<MyTabModel>()
117
-
{
118
-
new MyTabModel { Title = "One" },
119
-
new MyTabModel { Title = "Two", Disabled = true },
120
-
new MyTabModel { Title = "Three" }
121
-
};
122
-
123
-
public class MyTabModel
124
-
{
125
-
public string Title { get; set; }
126
-
public bool Disabled { get; set; }
127
-
}
128
-
}
129
-
````
130
-
131
-
>tip If you render components in the tabs created in a `foreach` loop, you may want to set their `@key` parameter to unique values, in order to ensure they will re-render. If you do not, the framework will render one instance of your custom component for all tabs and will only set its parameters, it will not initialize anew (`OnInitialized` will not fire a second time, only `OnParametersSet` will).
description: Persist Content of the TabStrip for Blazor.
5
+
slug: tabstrip-persist-content
6
+
tags: telerik,blazor,tab,strip,tabstrip,overview
7
+
published: True
8
+
position: 13
9
+
---
10
+
11
+
# TabStrip Persist Content
12
+
13
+
By default, the content of a Tab is rendered in the DOM when this Tab is active. Once it is deactivated, its content is disposed and re-initialized again when the user selects the corresponding tab.
14
+
15
+
To keep the Tab content in the DOM at all times, set the `PersistContent` boolean attribute of the TabStrip to `true`. In this way the inactive TabStrip content will be hidden with CSS.
In some cases, you might need to declare tabs for objects in a collection. The TabStrip allows you to render its tabs by iterating that collection.
14
+
15
+
This is an alternative approach for configuring the component instead of manually declaring each tab as a separate `TabStripTab` instance inside the `TabStrip` tag.
16
+
17
+
>tip If you render components in the tabs created in a `foreach` loop, you may want to set their `@key` parameter to unique values, in order to ensure they will re-render. If you do not, the framework will render one instance of your custom component for all tabs and will only set its parameters, it will not initialize anew (`OnInitialized` will not fire a second time, only `OnParametersSet` will).
18
+
19
+
>caption Extract information for the currently selected tab from your model. Alter the model to affect the TabStrip. Create tabs dynamically based on external data.
20
+
21
+
You can find another example with some more details in the following sample project: [Dynamic Tabs](https://github.com/telerik/blazor-ui/tree/master/tabstrip/DynamicTabs).
You can configure the `TabStripTab` instances in a TabStrip through the following parameters:
14
+
15
+
*[Title](#title)
16
+
*[Visible](#visible)
17
+
*[Disabled](#disabled)
18
+
19
+
20
+
## Title
21
+
22
+
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.
23
+
24
+
>caption Set the desired title for the tab heading.
25
+
26
+
````CSHTML
27
+
<TelerikTabStrip >
28
+
<TabStripTab Title="First">
29
+
First tab content.
30
+
</TabStripTab>
31
+
<TabStripTab Title="Second">
32
+
Second tab content.
33
+
</TabStripTab>
34
+
<TabStripTab Title="Third">
35
+
Third tab content.
36
+
</TabStripTab>
37
+
</TelerikTabStrip>
38
+
````
39
+
40
+
## Visible
41
+
42
+
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.
43
+
44
+
>caption Toggle the visibility of the second tab
45
+
46
+
````CSHTML
47
+
<TelerikButton OnClick="@ToggleVisible">Toggle Second Tab Visibility</TelerikButton>
48
+
49
+
<TelerikTabStrip>
50
+
<TabStripTab Title="First" >
51
+
First tab content.
52
+
</TabStripTab>
53
+
<TabStripTab Visible="@Visible" Title="Second">
54
+
Second tab content.
55
+
</TabStripTab>
56
+
<TabStripTab Title="Third">
57
+
Third tab content.
58
+
</TabStripTab>
59
+
</TelerikTabStrip>
60
+
61
+
@code {
62
+
public bool Visible { get; set; }
63
+
64
+
public void ToggleVisible()
65
+
{
66
+
Visible = !Visible;
67
+
}
68
+
}
69
+
````
70
+
71
+
## Disabled
72
+
73
+
The `Disabled` parameter allows you to mark a tab as disabled, so the user cannot select it.
74
+
75
+
>caption Disable the second tab
76
+
77
+
````CSHTML
78
+
<TelerikButton OnClick="@ToggleDisabled">Eanble/Disable Second Tab</TelerikButton>
By default, the tab titles display on top of the tab content.
14
+
15
+
You can customize their position through the optional `TabPosition` attribute of the `TelerikTabStrip` tag. It takes a member of the `Telerik.Blazor.TabPosition` enumeration:
0 commit comments