Skip to content

Commit c802368

Browse files
ntachevadimodi
ntacheva
and
dimodi
authored
TabStrip: Docs for Visible and PersistContent parameters. Refactoring the current docs (#619)
* docs(tabstrip): Docs for Visible and PersistContent parameters. Refactoring the current dosc * docs(tabstrip):updates as per comments * Update components/tabstrip/overview.md Co-authored-by: Dimo Dimov <[email protected]> * Update components/tabstrip/overview.md Co-authored-by: Dimo Dimov <[email protected]> * Update components/tabstrip/persist-content.md Co-authored-by: Dimo Dimov <[email protected]> * Update components/tabstrip/tabs-configuration.md Co-authored-by: Dimo Dimov <[email protected]> * Update components/tabstrip/tabs-configuration.md Co-authored-by: Dimo Dimov <[email protected]> * Update components/tabstrip/tabs-position.md Co-authored-by: Dimo Dimov <[email protected]> * Update components/tabstrip/tabs-position.md Co-authored-by: Dimo Dimov <[email protected]> * Update components/tabstrip/persist-content.md Co-authored-by: Dimo Dimov <[email protected]> * docs(tabstrip): updates * Update components/tabstrip/tabs-configuration.md Co-authored-by: Dimo Dimov <[email protected]> * docs(tabstrip):steps fix * docs(tabstrip):fix Co-authored-by: Dimo Dimov <[email protected]>
1 parent 1e40806 commit c802368

File tree

7 files changed

+270
-62
lines changed

7 files changed

+270
-62
lines changed

‎components/tabstrip/events.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ published: True
88
position: 20
99
---
1010

11-
# Tab Strip Events
11+
# TabStrip Events
1212

1313
This article explains the events available in the Telerik TabStrip for Blazor:
1414

‎components/tabstrip/header-template.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ published: True
88
position: 15
99
---
1010

11-
# Header Template
11+
# TabStrip Header Template
1212

1313
The TabStrip `HeaderTemplate` allows you to define custom content in the tab header - such as components, icons or badges, instead of plain text.
1414

‎components/tabstrip/overview.md

Lines changed: 22 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -12,20 +12,19 @@ position: 0
1212

1313
This article provides information about the <a href = "https://www.telerik.com/blazor-ui/tabstrip" target = "_blank">Blazor TabStrip component</a> and its core features.
1414

15-
#### Basics
15+
>caption In this article:
16+
* [Basics](#basics)
17+
* [Features](#features)
18+
* [Example](#example)
1619

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
1821

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:
2023

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
2928

3029
>caption A Telerik TabStrip with example reference, tab position and disabled tab
3130
@@ -53,7 +52,18 @@ To control the position of the tab titles, the main TabStrip tag exposes the opt
5352
5453
![](images/tabstrip-left.png)
5554

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
5767

5868
````CSHTML
5969
Active Tab Index: @ActiveTabIndex
@@ -82,54 +92,6 @@ Active Tab Index: @ActiveTabIndex
8292
}
8393
````
8494

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).
89-
90-
````CSHTML
91-
@result
92-
93-
<TelerikTabStrip ActiveTabIndexChanged="@TabChangedHandler">
94-
@{
95-
foreach (MyTabModel item in tabs)
96-
{
97-
<TabStripTab Title="@item.Title" Disabled="@item.Disabled">
98-
Content for tab @item.Title
99-
</TabStripTab>
100-
}
101-
}
102-
</TelerikTabStrip>
103-
104-
<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).
132-
13395
## See Also
13496

13597
* [Live Demo: TabStrip](https://demos.telerik.com/blazor-ui/tabstrip/index)

‎components/tabstrip/persist-content.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
title: Persist Content
3+
page_title: TabStrip Persist Content
4+
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.
16+
17+
>caption Persist the TabStrip content
18+
19+
````CSHTML
20+
<TelerikTabStrip PersistTabContent="true">
21+
<TabStripTab Title="First">
22+
First tab content.
23+
</TabStripTab>
24+
<TabStripTab Title="Second">
25+
Second tab content.
26+
</TabStripTab>
27+
<TabStripTab Title="Third">
28+
Third tab content.
29+
</TabStripTab>
30+
</TelerikTabStrip>
31+
````
32+
33+
## See Also
34+
35+
* [Live Demo: TabStrip - Persist Tab Content](https://demos.telerik.com/blazor-ui/tabstrip/persist-content)

‎components/tabstrip/tabs-collection.md

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
---
2+
title: Tabs Collection
3+
page_title: TabStrip Tabs Collection
4+
description: Overview of the TabStrip for Blazor.
5+
slug: tabstrip-tabs-collection
6+
tags: telerik,blazor,tab,strip,tabstrip,collection
7+
published: True
8+
position: 17
9+
---
10+
11+
# TabStrip Tabs Collection
12+
13+
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).
22+
23+
````CSHTML
24+
@result
25+
26+
<TelerikTabStrip ActiveTabIndexChanged="@TabChangedHandler">
27+
@{
28+
foreach (MyTabModel item in tabs)
29+
{
30+
<TabStripTab Title="@item.Title" Disabled="@item.Disabled">
31+
Content for tab @item.Title
32+
</TabStripTab>
33+
}
34+
}
35+
</TelerikTabStrip>
36+
37+
<TelerikButton OnClick="@( () => tabs[1].Disabled = !tabs[1].Disabled )">Toggle the Disabled state of the second tab</TelerikButton>
38+
39+
@code {
40+
MarkupString result { get; set; }
41+
void TabChangedHandler(int newIndex)
42+
{
43+
string tempResult = $"current tab {newIndex} selected on {DateTime.Now}";
44+
MyTabModel currTab = tabs[newIndex];
45+
tempResult += $"<br />the new tab has a title {currTab.Title}";
46+
result = new MarkupString(tempResult);
47+
}
48+
49+
List<MyTabModel> tabs = new List<MyTabModel>()
50+
{
51+
new MyTabModel { Title = "One" },
52+
new MyTabModel { Title = "Two", Disabled = true },
53+
new MyTabModel { Title = "Three" }
54+
};
55+
56+
public class MyTabModel
57+
{
58+
public string Title { get; set; }
59+
public bool Disabled { get; set; }
60+
}
61+
}
62+
````
63+
64+
## See Also
65+
66+
* [Live Demo: TabStrip](https://demos.telerik.com/blazor-ui/tabstrip/index)

‎components/tabstrip/tabs-configuration.md

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
---
2+
title: Tabs Configuration
3+
page_title: TabStrip Tabs Configuration
4+
description: Overview of the TabStrip for Blazor.
5+
slug: tabstrip-tabs-configuration
6+
tags: telerik,blazor,tab,strip,tabstrip,overview
7+
published: True
8+
position: 7
9+
---
10+
11+
# TabStrip Tabs Configuration
12+
13+
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>
79+
80+
<TelerikTabStrip>
81+
<TabStripTab Title="First" >
82+
First tab content.
83+
</TabStripTab>
84+
<TabStripTab Disabled="@Disabled" Title="Second">
85+
Second tab content.
86+
</TabStripTab>
87+
<TabStripTab Title="Third">
88+
Third tab content.
89+
</TabStripTab>
90+
</TelerikTabStrip>
91+
92+
@code {
93+
public bool Disabled { get; set; } = true;
94+
95+
public void ToggleDisabled()
96+
{
97+
Disabled = !Disabled;
98+
}
99+
}
100+
````
101+
102+
## See Also
103+
104+
* [Live Demo: TabStrip](https://demos.telerik.com/blazor-ui/tabstrip/index)
105+
* [Live Demo: TabStrip - Tab Visibility](https://demos.telerik.com/blazor-ui/tabstrip/tab-visibility)

‎components/tabstrip/tabs-position.md

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
---
2+
title: Tabs Position
3+
page_title: TabStrip Tabs Position
4+
description: Overview of the TabStrip for Blazor.
5+
slug: tabstrip-tabs-position
6+
tags: telerik,blazor,tab,strip,tabstrip,position
7+
published: True
8+
position: 10
9+
---
10+
11+
# TabStrip Tabs Position
12+
13+
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:
16+
17+
* `Top` (default)
18+
* `Left`
19+
* `Right`
20+
* `Bottom`
21+
22+
>caption Set the desired tab position.
23+
24+
````CSHTML
25+
<TelerikTabStrip TabPosition="@TabPosition.Bottom">
26+
<TabStripTab Title="First">
27+
First tab content.
28+
</TabStripTab>
29+
<TabStripTab Title="Second">
30+
Second tab content.
31+
</TabStripTab>
32+
<TabStripTab Title="Third">
33+
Third tab content.
34+
</TabStripTab>
35+
</TelerikTabStrip>
36+
````
37+
38+
## See Also
39+
40+
* [Live Demo: TabStrip - Tab Positions](https://demos.telerik.com/blazor-ui/tabstrip/tab-positions)

0 commit comments

Comments
 (0)