From 5129f677af795a2971712c76ade1b86326718b97 Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Wed, 2 Apr 2025 16:59:05 +0300 Subject: [PATCH 1/5] docs(TabStrip): add dynamic tabs docs --- components/tabstrip/dynamic-tabs.md | 73 +++++++++++++++++++++++++++++ components/tabstrip/events.md | 32 +++++++++++++ components/tabstrip/overview.md | 7 ++- 3 files changed, 111 insertions(+), 1 deletion(-) create mode 100644 components/tabstrip/dynamic-tabs.md diff --git a/components/tabstrip/dynamic-tabs.md b/components/tabstrip/dynamic-tabs.md new file mode 100644 index 000000000..e2e1dfda4 --- /dev/null +++ b/components/tabstrip/dynamic-tabs.md @@ -0,0 +1,73 @@ +--- +title: Dynamic Tabs +page_title: TabStrip - Dynamic Tabs +description: Learn how to use the ActiveTabId parameter in the Telerik TabStrip for Blazor to manage dynamic tabs. +slug: tabstrip-dynamic-tabs +tags: telerik,blazor,tabstrip,dynamic tabs +published: True +position: 3 +--- + +# Dynamic Tabs in TabStrip + +The Telerik TabStrip component now supports managing dynamic tabs more effectively with the introduction of the `ActiveTabId` parameter and the new [`ActiveTabIdChanged`](slug:tabstrip-events#activetabidchanged) event. These features allow users to specify or track the active tab using its unique ID, making it easier to work with dynamic tab scenarios. + +## ActiveTabId Parameter + +The `ActiveTabId` parameter allows you to manage the active tab by its ID. It supports two-way binding, allowing seamless updates between the component and the application state. + +### Configuration Example + +The following example demonstrates how to use the `ActiveTabId` parameter to manage dynamic tabs: + +````RAZOR + + @{ + foreach (var tab in Tabs) + { + + + @tab.Title + + + @if (tab.Id == "home") + { +

Welcome back! Check out the latest updates and news here.

+ } + else if (tab.Id == "profile") + { +

Update your personal information and preferences in this section.

+ } + else if (tab.Id == "settings") + { +

Customize your experience by adjusting your settings here.

+ } + + + } + } + + +@code { + private string ActiveTabId { get; set; } + + private List Tabs { get; set; } = new List +{ + new Tab { Id = "home", Title = "🏠 Home", Visible = true, Disabled = false }, + new Tab { Id = "profile", Title = "👤 Profile", Visible = true, Disabled = false }, + new Tab { Id = "settings", Title = "⚙️ Settings", Visible = true, Disabled = false } +}; + + public class Tab + { + public string Id { get; set; } + public string Title { get; set; } + public bool Visible { get; set; } + public bool Disabled { get; set; } + } +} +```` + +## See Also + +* [TabStrip Events](slug:tabstrip-events) diff --git a/components/tabstrip/events.md b/components/tabstrip/events.md index 78492e00c..e4f295369 100644 --- a/components/tabstrip/events.md +++ b/components/tabstrip/events.md @@ -12,8 +12,39 @@ position: 20 This article explains the events available in the Telerik TabStrip for Blazor: +* [ActiveTabIdChanged](#activetabidchanged) * [ActiveTabIndexChanged](#activetabindexchanged) +## ActiveTabIdChanged + +The `ActiveTabIdChanged` event fires when the user changes the active tab. The event handler receives the new tab ID of type `string` as an argument. This event is designed to work with the new [`ActiveTabId` parameter](slug:tabstrip-dynamic-tabs). + +>caption Handle the tab ID selection changed event + +````RAZOR + + + First tab content. Click through the tabs. + + + Second tab content. + + + Third tab content. + + + +@Result + +@code { + private string Result { get; set; } + private void HandleTabIdChange(string tabId) + { + Result = $"Current tab ID is {tabId}"; + } +} +```` + ## ActiveTabIndexChanged The `ActiveTabIndexChanged` event fires when the user changes the tab that is currently shown. The event handler receives the new index as an argument. @@ -81,3 +112,4 @@ If you remove programmatically the currently active tab, when it disposes, the e ## See Also * [TabStrip Overview](slug:components/tabstrip/overview) + * [Dynamic Tabs](slug:tabstrip-dynamic-tabs) diff --git a/components/tabstrip/overview.md b/components/tabstrip/overview.md index 01c42b524..9a9ebe558 100644 --- a/components/tabstrip/overview.md +++ b/components/tabstrip/overview.md @@ -64,9 +64,13 @@ The Blazor TabStrip component can persist the content of the tabs. When the user The Blazor TabStrip allows you to scroll only its tabs. This is useful for scenarios where a lot of tabs are defined. [Read more about the Scrollable Tabs...](slug:tabstrip-scroll-tabs) +## Dynamic Tabs + +The Blazor TabStrip component allows you to create TabStrip tabs dynamically. [Read more about the Dynamic Tabs...](slug:tabstrip-dynamic-tabs) + ## Events -The TabStrip fires an [`ActiveTabIndexChanged` event](slug:tabstrip-events) when the user clicks on a tab to select it. +The TabStrip fires an `ActiveTabIndexChanged`and `ActiveTabIdChanged` events when the user clicks on a tab to select it. [Read more about the TabStrip events...](slug:tabstrip-events) ## TabStrip Parameters @@ -77,6 +81,7 @@ The TabStrip provides the following features to allow further customization of i | Parameter | Type | Header 2 | |------------------|-------|------------------------------------------| | `ActiveTabIndex` | `int` | The index of the currently shown tab. Supports two-way binding. +| `ActiveTabId` | `int` | The index of the currently active tab. If it is not set, the first tab will be active. |`PersistTabContent` | `bool` | Whether to remove the content of inactive tabs from the DOM (if `false`), or just hide it with CSS (if `true`). See [Persist Content](slug:tabstrip-persist-content) | `Scrollable` | `bool` | Whether the tabs will be scrollable. See [Scrollable Tabs](slug:tabstrip-scroll-tabs) | `ScrollButtonsPosition` | `TabStripScrollButtonsPosition` enum
(`TabStripScrollButtonsPosition.Split`)| Specifies the position of the buttons when the TabStrip is scrollable. From 1a9d625a55a69a32457563f70651fd3a968daf80 Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Wed, 9 Apr 2025 15:31:19 +0300 Subject: [PATCH 2/5] Update components/tabstrip/dynamic-tabs.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- components/tabstrip/dynamic-tabs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/tabstrip/dynamic-tabs.md b/components/tabstrip/dynamic-tabs.md index e2e1dfda4..5621c8743 100644 --- a/components/tabstrip/dynamic-tabs.md +++ b/components/tabstrip/dynamic-tabs.md @@ -10,7 +10,7 @@ position: 3 # Dynamic Tabs in TabStrip -The Telerik TabStrip component now supports managing dynamic tabs more effectively with the introduction of the `ActiveTabId` parameter and the new [`ActiveTabIdChanged`](slug:tabstrip-events#activetabidchanged) event. These features allow users to specify or track the active tab using its unique ID, making it easier to work with dynamic tab scenarios. +The Telerik TabStrip component supports effective management of dynamic tabs through the `ActiveTabId` parameter and the [`ActiveTabIdChanged`](slug:tabstrip-events#activetabidchanged) event. These features allow users to specify or track the active tab using its unique ID, making it easier to work with dynamic tab scenarios. ## ActiveTabId Parameter From 963d64330616fd6f8acd9b6db63aed7c7f6eee87 Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Wed, 9 Apr 2025 15:31:26 +0300 Subject: [PATCH 3/5] Update components/tabstrip/dynamic-tabs.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- components/tabstrip/dynamic-tabs.md | 1 - 1 file changed, 1 deletion(-) diff --git a/components/tabstrip/dynamic-tabs.md b/components/tabstrip/dynamic-tabs.md index 5621c8743..e9a525090 100644 --- a/components/tabstrip/dynamic-tabs.md +++ b/components/tabstrip/dynamic-tabs.md @@ -16,7 +16,6 @@ The Telerik TabStrip component supports effective management of dynamic tabs thr The `ActiveTabId` parameter allows you to manage the active tab by its ID. It supports two-way binding, allowing seamless updates between the component and the application state. -### Configuration Example The following example demonstrates how to use the `ActiveTabId` parameter to manage dynamic tabs: From 18c1e04b101ac1e6055acafa2d29c41535f2c633 Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Wed, 9 Apr 2025 15:31:35 +0300 Subject: [PATCH 4/5] Update components/tabstrip/dynamic-tabs.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- components/tabstrip/dynamic-tabs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/tabstrip/dynamic-tabs.md b/components/tabstrip/dynamic-tabs.md index e9a525090..76b9fb24d 100644 --- a/components/tabstrip/dynamic-tabs.md +++ b/components/tabstrip/dynamic-tabs.md @@ -17,7 +17,7 @@ The Telerik TabStrip component supports effective management of dynamic tabs thr The `ActiveTabId` parameter allows you to manage the active tab by its ID. It supports two-way binding, allowing seamless updates between the component and the application state. -The following example demonstrates how to use the `ActiveTabId` parameter to manage dynamic tabs: +>caption Using the `ActiveTabId` parameter to manage dynamic tabs ````RAZOR From 890b9bcbdc46f1d3a07227a269799c371ef66a06 Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Wed, 9 Apr 2025 16:54:09 +0300 Subject: [PATCH 5/5] chore(TabStrip): add missing information and remove unnecessary page --- components/tabstrip/active-tab-index.md | 2 + components/tabstrip/dynamic-tabs.md | 72 ---------------------- components/tabstrip/events.md | 6 +- components/tabstrip/overview.md | 6 +- components/tabstrip/tabs-collection.md | 79 ++++++++++++++----------- 5 files changed, 53 insertions(+), 112 deletions(-) delete mode 100644 components/tabstrip/dynamic-tabs.md diff --git a/components/tabstrip/active-tab-index.md b/components/tabstrip/active-tab-index.md index 1bdbbab10..c06afa508 100644 --- a/components/tabstrip/active-tab-index.md +++ b/components/tabstrip/active-tab-index.md @@ -43,6 +43,8 @@ Active Tab Index: @ActiveTabIndex } ```` +> The `ActiveTabIndexChanged` event and `ActiveTabIndex` parameter will be deprecated in a future releases. It is recommended to use the [`ActiveTabId`](slug:tabstrip-tabs-collection) parameter with [`ActiveTabIdChanged`](slug:tabstrip-events#activetabidchanged) event instead. + ## See Also * [Live Demo: TabStrip](https://demos.telerik.com/blazor-ui/tabstrip/overview) diff --git a/components/tabstrip/dynamic-tabs.md b/components/tabstrip/dynamic-tabs.md deleted file mode 100644 index 76b9fb24d..000000000 --- a/components/tabstrip/dynamic-tabs.md +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: Dynamic Tabs -page_title: TabStrip - Dynamic Tabs -description: Learn how to use the ActiveTabId parameter in the Telerik TabStrip for Blazor to manage dynamic tabs. -slug: tabstrip-dynamic-tabs -tags: telerik,blazor,tabstrip,dynamic tabs -published: True -position: 3 ---- - -# Dynamic Tabs in TabStrip - -The Telerik TabStrip component supports effective management of dynamic tabs through the `ActiveTabId` parameter and the [`ActiveTabIdChanged`](slug:tabstrip-events#activetabidchanged) event. These features allow users to specify or track the active tab using its unique ID, making it easier to work with dynamic tab scenarios. - -## ActiveTabId Parameter - -The `ActiveTabId` parameter allows you to manage the active tab by its ID. It supports two-way binding, allowing seamless updates between the component and the application state. - - ->caption Using the `ActiveTabId` parameter to manage dynamic tabs - -````RAZOR - - @{ - foreach (var tab in Tabs) - { - - - @tab.Title - - - @if (tab.Id == "home") - { -

Welcome back! Check out the latest updates and news here.

- } - else if (tab.Id == "profile") - { -

Update your personal information and preferences in this section.

- } - else if (tab.Id == "settings") - { -

Customize your experience by adjusting your settings here.

- } - - - } - } - - -@code { - private string ActiveTabId { get; set; } - - private List Tabs { get; set; } = new List -{ - new Tab { Id = "home", Title = "🏠 Home", Visible = true, Disabled = false }, - new Tab { Id = "profile", Title = "👤 Profile", Visible = true, Disabled = false }, - new Tab { Id = "settings", Title = "⚙️ Settings", Visible = true, Disabled = false } -}; - - public class Tab - { - public string Id { get; set; } - public string Title { get; set; } - public bool Visible { get; set; } - public bool Disabled { get; set; } - } -} -```` - -## See Also - -* [TabStrip Events](slug:tabstrip-events) diff --git a/components/tabstrip/events.md b/components/tabstrip/events.md index e4f295369..2753e31fd 100644 --- a/components/tabstrip/events.md +++ b/components/tabstrip/events.md @@ -17,7 +17,7 @@ This article explains the events available in the Telerik TabStrip for Blazor: ## ActiveTabIdChanged -The `ActiveTabIdChanged` event fires when the user changes the active tab. The event handler receives the new tab ID of type `string` as an argument. This event is designed to work with the new [`ActiveTabId` parameter](slug:tabstrip-dynamic-tabs). +The `ActiveTabIdChanged` event fires when the user changes the active tab. The event handler receives the new tab ID of type `string` as an argument. This event is designed to work with the new [`ActiveTabId` parameter](slug:tabstrip-tabs-collection). >caption Handle the tab ID selection changed event @@ -51,6 +51,8 @@ The `ActiveTabIndexChanged` event fires when the user changes the tab that is cu If you remove programmatically the currently active tab, when it disposes, the event will fire with index `-1` as there will be no selected tab anymore. +> The `ActiveTabIndexChanged` event and `ActiveTabIndex` parameter will be deprecated in a future releases. It is recommended to use the [`ActiveTabId`](slug:tabstrip-tabs-collection) parameter with [`ActiveTabIdChanged`](slug:tabstrip-events#activetabidchanged) event instead. + >caption Handle the tab selection changed event ````RAZOR @@ -112,4 +114,4 @@ If you remove programmatically the currently active tab, when it disposes, the e ## See Also * [TabStrip Overview](slug:components/tabstrip/overview) - * [Dynamic Tabs](slug:tabstrip-dynamic-tabs) + * [Dynamic Tabs](slug:tabstrip-tabs-collection) diff --git a/components/tabstrip/overview.md b/components/tabstrip/overview.md index 9a9ebe558..e525a5b25 100644 --- a/components/tabstrip/overview.md +++ b/components/tabstrip/overview.md @@ -66,7 +66,7 @@ The Blazor TabStrip allows you to scroll only its tabs. This is useful for scena ## Dynamic Tabs -The Blazor TabStrip component allows you to create TabStrip tabs dynamically. [Read more about the Dynamic Tabs...](slug:tabstrip-dynamic-tabs) +The Blazor TabStrip component allows you to create TabStrip tabs dynamically. [Read more about the Dynamic Tabs...](slug:tabstrip-tabs-collection) ## Events @@ -80,8 +80,8 @@ The TabStrip provides the following features to allow further customization of i | Parameter | Type | Header 2 | |------------------|-------|------------------------------------------| -| `ActiveTabIndex` | `int` | The index of the currently shown tab. Supports two-way binding. -| `ActiveTabId` | `int` | The index of the currently active tab. If it is not set, the first tab will be active. +| `ActiveTabIndex` | `int` | The index of the currently shown tab. Supports two-way binding. This parameter is marked as obsolete and will be deprecated in future versions. Do not use togother with `ActiveTabId`. | +| `ActiveTabId` | `int` | The index of the currently active tab. If it is not set, the first tab will be active. Do not use it together with `ActiveTabIndex`.| |`PersistTabContent` | `bool` | Whether to remove the content of inactive tabs from the DOM (if `false`), or just hide it with CSS (if `true`). See [Persist Content](slug:tabstrip-persist-content) | `Scrollable` | `bool` | Whether the tabs will be scrollable. See [Scrollable Tabs](slug:tabstrip-scroll-tabs) | `ScrollButtonsPosition` | `TabStripScrollButtonsPosition` enum
(`TabStripScrollButtonsPosition.Split`)| Specifies the position of the buttons when the TabStrip is scrollable. diff --git a/components/tabstrip/tabs-collection.md b/components/tabstrip/tabs-collection.md index 41e8f3fae..77d740a82 100644 --- a/components/tabstrip/tabs-collection.md +++ b/components/tabstrip/tabs-collection.md @@ -1,61 +1,70 @@ --- -title: Tabs Collection -page_title: TabStrip Tabs Collection -description: Overview of the TabStrip for Blazor. +title: Dynamic Tabs +page_title: TabStrip - Dynamic Tabs +description: Learn how to use the ActiveTabId parameter in the Telerik TabStrip for Blazor to manage dynamic tabs. slug: tabstrip-tabs-collection -tags: telerik,blazor,tab,strip,tabstrip,collection +tags: telerik,blazor,tabstrip,dynamic tabs published: True -position: 17 +position: 3 --- -# TabStrip Tabs Collection +# Dynamic Tabs in TabStrip -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. +In some cases, you might need to declare tabs for objects in a collection. The Telerik TabStrip allows you to render its tabs by iterating that collection. -This is an alternative approach for configuring the component instead of manually declaring each tab as a separate `TabStripTab` instance inside the `TabStrip` tag. +The Telerik Tabstrip supports effective management of dynamic tabs through the `ActiveTabId` parameter and the [`ActiveTabIdChanged`](slug:tabstrip-events#activetabidchanged) event. These features allow users to specify or track the active tab using its unique ID, making it easier to work with dynamic tab scenarios. ->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). +## ActiveTabId Parameter ->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. +The `ActiveTabId` parameter allows you to manage the active tab by its ID. It supports two-way binding, allowing seamless updates between the component and the application state. -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). +To deactivate all tabs, set the ActiveTabId parameter to `string.Empty`. -````RAZOR -@result +>caption Using the `ActiveTabId` parameter to manage dynamic tabs - +````RAZOR + @{ - foreach (MyTabModel item in tabs) + foreach (var tab in Tabs) { - - Content for tab @item.Title + + + @tab.Title + + + @if (tab.Id == "home") + { +

Welcome back! Check out the latest updates and news here.

+ } + else if (tab.Id == "profile") + { +

Update your personal information and preferences in this section.

+ } + else if (tab.Id == "settings") + { +

Customize your experience by adjusting your settings here.

+ } + } } -Toggle the Disabled state of the second tab - @code { - MarkupString result { get; set; } - void TabChangedHandler(int newIndex) - { - string tempResult = $"current tab {newIndex} selected on {DateTime.Now}"; - MyTabModel currTab = tabs[newIndex]; - tempResult += $"
the new tab has a title {currTab.Title}"; - result = new MarkupString(tempResult); - } + private string ActiveTabId { get; set; } - List tabs = new List() - { - new MyTabModel { Title = "One" }, - new MyTabModel { Title = "Two", Disabled = true }, - new MyTabModel { Title = "Three" } - }; + private List Tabs { get; set; } = new List +{ + new Tab { Id = "home", Title = "🏠 Home", Visible = true, Disabled = false }, + new Tab { Id = "profile", Title = "👤 Profile", Visible = true, Disabled = false }, + new Tab { Id = "settings", Title = "⚙️ Settings", Visible = true, Disabled = false } +}; - public class MyTabModel + public class Tab { + public string Id { get; set; } public string Title { get; set; } + public bool Visible { get; set; } public bool Disabled { get; set; } } } @@ -63,4 +72,4 @@ You can find another example with some more details in the following sample proj ## See Also - * [Live Demo: TabStrip](https://demos.telerik.com/blazor-ui/tabstrip/overview) +* [TabStrip Events](slug:tabstrip-events)