diff --git a/components/tabstrip/events.md b/components/tabstrip/events.md index 2753e31fd..4f29d6340 100644 --- a/components/tabstrip/events.md +++ b/components/tabstrip/events.md @@ -17,19 +17,21 @@ 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-tabs-collection). +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. If the `Id` parameter of the `TabStripTab` is not set, the component will generate one automatically. + +The `ActiveTabIdChanged` 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. @@ -37,10 +39,11 @@ The `ActiveTabIdChanged` event fires when the user changes the active tab. The e @Result @code { - private string Result { get; set; } + private string Result { get; set; } = string.Empty; + private void HandleTabIdChange(string tabId) { - Result = $"Current tab ID is {tabId}"; + Result = $"The current tab ID is {tabId}"; } } ```` diff --git a/components/tabstrip/tabs-collection.md b/components/tabstrip/tabs-collection.md index 77d740a82..49d4ece1c 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 {