From e6b42840511203b7d46675bf95579d15e1bad196 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Wed, 4 Jun 2025 14:57:48 +0300 Subject: [PATCH] chore(TabStrip): add kb for adding and removing tabs --- components/tabstrip/tabs-collection.md | 17 +- knowledge-base/tabstrip-add-remove-tabs.md | 171 +++++++++++++++++++++ knowledge-base/tabstrip-dynamic-tabs.md | 31 ---- 3 files changed, 182 insertions(+), 37 deletions(-) create mode 100644 knowledge-base/tabstrip-add-remove-tabs.md delete mode 100644 knowledge-base/tabstrip-dynamic-tabs.md diff --git a/components/tabstrip/tabs-collection.md b/components/tabstrip/tabs-collection.md index 77d740a82a..a795e7ead2 100644 --- a/components/tabstrip/tabs-collection.md +++ b/components/tabstrip/tabs-collection.md @@ -27,7 +27,7 @@ To deactivate all tabs, set the ActiveTabId parameter to `string.Empty`. @{ foreach (var tab in Tabs) { - + @tab.Title @@ -54,11 +54,11 @@ To deactivate all tabs, set the ActiveTabId parameter to `string.Empty`. 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 } -}; + { + 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 { @@ -70,6 +70,11 @@ To deactivate all tabs, set the ActiveTabId parameter to `string.Empty`. } ```` +## Add and Remove Tabs + +If you are iterating through a collection to render the tabs and you need to allow the users to add and remove tabs, you may use the `ActiveTabId` parameter to set the active tab after adding and removing tabs. See details and example in this article: [Add and Remove Tabs](slug:tabstrip-kb-add-remove-tabs). + + ## See Also * [TabStrip Events](slug:tabstrip-events) diff --git a/knowledge-base/tabstrip-add-remove-tabs.md b/knowledge-base/tabstrip-add-remove-tabs.md new file mode 100644 index 0000000000..d9404d7d1c --- /dev/null +++ b/knowledge-base/tabstrip-add-remove-tabs.md @@ -0,0 +1,171 @@ +--- +title: Add and Remove Tabs +description: Learn how to dynamically add and remove tabs +type: how-to +page_title: Add and Remove Tabs +slug: tabstrip-kb-add-remove-tabs +tags: telerik,blazor,tabstrip,add tabs,remove tabs +ticketid: +res_type: kb +previous_url: /knowledge-base/tabstrip-dynamic-tabs +--- + +## Environment + + + + + + + + +
ProductTabStrip for Blazor
+ + +## Description + +I have a collection of items representing separate tabs. I am iterating through that collection to render a tab for each item as shown [here](slug:tabstrip-tabs-collection). I want to allow the user to add and remove tabs, how to achieve that? + +This KB article answers the following questions: + +* How to remove a tab with a "X" button in the tab header? +* How to use a button to add tabs and position this button next to the last tab header (similar to the "+" button in the browser)? + +## Solution + +The example below shows how to: +* Use a [`HeaderTemplate`](slug:tabstrip-header-template) for the tab to add a button that removes the tab. +* Conditionally display the "X" button based on the tabs' count. +* Declare a button for adding tabs. +* Use custom styling and JavaScript to position the "+" button next to the last tab header. + +````RAZOR +@inject IJSRuntime JS + + + +
+ + + @foreach (Tab tab in Tabs) + { + + +
+ @tab.Title + @if (Tabs.Count > 1) + { + + } +
+ + + Content for @tab.Title + + + } + +
+ +@code { + private string ActiveTabId { get; set; } + + private List Tabs = new List() + { + new Tab { Id = Guid.NewGuid().ToString(), Title = "Tab 1" }, + new Tab { Id = Guid.NewGuid().ToString(), Title = "Tab 2" }, + new Tab { Id = Guid.NewGuid().ToString(), Title = "Tab 3" } + }; + + private void AddTab() + { + Tab tabToAdd = new Tab { Id = Guid.NewGuid().ToString(), Title = $"New Tab" }; + + Tabs.Add(tabToAdd); + + //In this example, we are always activating the newly added tab. Adjust the logic to activate a different tab if needed. + ActiveTabId = tabToAdd.Id; + } + + private void RemoveTab(Tab tab) + { + if (Tabs.Count <= 1) + { + return; + } + + Tabs.Remove(tab); + + //In this example, we are always activating the first tab. Adjust the logic to determine which tab to activate after removal. + ActiveTabId = Tabs[0].Id; + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + await JS.InvokeVoidAsync("positionAddTabButton"); + + await base.OnAfterRenderAsync(firstRender); + } + + public class Tab + { + public string Id { get; set; } + + public string Title { get; set; } + } + +} + + +```` + +## See Also + +* [Dynamic Tabs](slug:tabstrip-tabs-collection) \ No newline at end of file diff --git a/knowledge-base/tabstrip-dynamic-tabs.md b/knowledge-base/tabstrip-dynamic-tabs.md deleted file mode 100644 index b2ae2f693b..0000000000 --- a/knowledge-base/tabstrip-dynamic-tabs.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Dynamic Tabs -description: How to create Dynamic Tabs in TabStip. -type: how-to -page_title: Dynamic Tabs -slug: tabstrip-kb-dynamic-tabs -position: -tags: -res_type: kb ---- - -## Environment - - - - - - - - -
ProductTabStrip for Blazor
- - -## Description - -How to create Dynamic Tabs in TabStip? How to add and remove tabs dynamically? How to get information about the currently active tab? How to set the content of the tabs dynamically? - - -## Solution - -An example is available in the following project: [https://github.com/telerik/blazor-ui/tree/master/tabstrip/DynamicTabs](https://github.com/telerik/blazor-ui/tree/master/tabstrip/DynamicTabs). \ No newline at end of file