diff --git a/components/tabstrip/active-tab-index.md b/components/tabstrip/active-tab-index.md index 1bdbbab101..c06afa508d 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/events.md b/components/tabstrip/events.md index 78492e00cc..2753e31fde 100644 --- a/components/tabstrip/events.md +++ b/components/tabstrip/events.md @@ -12,14 +12,47 @@ 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-tabs-collection). + +>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. 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 @@ -81,3 +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-tabs-collection) diff --git a/components/tabstrip/overview.md b/components/tabstrip/overview.md index 01c42b524b..e525a5b253 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-tabs-collection) + ## 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 @@ -76,7 +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. +| `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 41e8f3fae7..77d740a82a 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)