Skip to content

Commit

Permalink
Tabs - get active tab #813 (#817)
Browse files Browse the repository at this point in the history
  • Loading branch information
gvreddy04 authored Jul 23, 2024
1 parent 993619e commit cbf1b52
Show file tree
Hide file tree
Showing 4 changed files with 46 additions and 21 deletions.
Original file line number Diff line number Diff line change
@@ -1,30 +1,34 @@
<Tabs EnableFadeEffect="true"
OnShowing="@(args => OnTabShowingAsync(args))"
OnShowing="@(args => OnTabShowingAsync(args))"
OnShown="@(args => OnTabShownAsync(args))"
OnHiding="@(args => OnTabHidingAsync(args))"
OnHidden="@(args => OnTabHiddenAsync(args))">
<Tab Title="Home" Active="true">
<Tab Title="Home" Name="HomeTab" Active="true">
<Content>
<p class="mt-3">This is the placeholder content for the <b>Home</b> tab.</p>
</Content>
</Tab>
<Tab Title="Profile">
<Tab Title="Profile" Name="ProfileTab">
<Content>
<p class="mt-3">This is the placeholder content for the <b>Profile</b> tab.</p>
</Content>
</Tab>
<Tab Title="Contact">
<Tab Title="Contact" Name="ContactTab">
<Content>
<p class="mt-3">This is the placeholder content for the <b>Contact</b> tab.</p>
</Content>
</Tab>
</Tabs>

<p>Current Active Tab: <strong>@activeTabTitle</strong></p>
<p>Previous Active Tab: <strong>@previousActiveTabTitle</strong></p>
<p>Current Active Tab Name: <strong>@activeTabName</strong></p>
<p>Current Active Tab Title: <strong>@activeTabTitle</strong></p>
<p>Previous Active Tab Name: <strong>@previousActiveTabName</strong></p>
<p>Previous Active Tab Title: <strong>@previousActiveTabTitle</strong></p>

@code {
private string? activeTabName;
private string? activeTabTitle;
private string? previousActiveTabName;
private string? previousActiveTabTitle;

private void OnTabShowingAsync(TabsEventArgs args)
Expand All @@ -35,7 +39,9 @@ OnShowing="@(args => OnTabShowingAsync(args))"

private void OnTabShownAsync(TabsEventArgs args)
{
activeTabName = args.ActiveTabName;
activeTabTitle = args.ActiveTabTitle;
previousActiveTabName = args.PreviousActiveTabName;
previousActiveTabTitle = args.PreviousActiveTabTitle;
}

Expand Down
30 changes: 18 additions & 12 deletions blazorbootstrap/Components/Tabs/Tabs.razor.cs
Original file line number Diff line number Diff line change
Expand Up @@ -69,43 +69,49 @@ protected override async Task OnInitializedAsync()
[JSInvokable]
public async Task bsHiddenTab(string activeTabId, string previousActiveTabId)
{
var activeTabTitle = tabs?.FirstOrDefault(x => x.Id == activeTabId)?.Title;
var previousActiveTabTitle = tabs?.FirstOrDefault(x => x.Id == previousActiveTabId)?.Title;
var activeTab = tabs?.FirstOrDefault(x => x.Id == activeTabId);
var previousActiveTab = tabs?.FirstOrDefault(x => x.Id == previousActiveTabId);

var args = new TabsEventArgs(activeTabTitle!, previousActiveTabTitle!);
var args = new TabsEventArgs(activeTab?.Name!, activeTab?.Title!, previousActiveTab?.Name!, previousActiveTab?.Title!);
await OnHidden.InvokeAsync(args);
}

[JSInvokable]
public async Task bsHideTab(string activeTabId, string previousActiveTabId)
{
var activeTabTitle = tabs?.FirstOrDefault(x => x.Id == activeTabId)?.Title;
var previousActiveTabTitle = tabs?.FirstOrDefault(x => x.Id == previousActiveTabId)?.Title;
var activeTab = tabs?.FirstOrDefault(x => x.Id == activeTabId);
var previousActiveTab = tabs?.FirstOrDefault(x => x.Id == previousActiveTabId);

var args = new TabsEventArgs(activeTabTitle!, previousActiveTabTitle!);
var args = new TabsEventArgs(activeTab?.Name!, activeTab?.Title!, previousActiveTab?.Name!, previousActiveTab?.Title!);
await OnHiding.InvokeAsync(args);
}

[JSInvokable]
public async Task bsShownTab(string activeTabId, string previousActiveTabId)
{
var activeTabTitle = tabs?.FirstOrDefault(x => x.Id == activeTabId)?.Title;
var previousActiveTabTitle = tabs?.FirstOrDefault(x => x.Id == previousActiveTabId)?.Title;
var activeTab = tabs?.FirstOrDefault(x => x.Id == activeTabId);
var previousActiveTab = tabs?.FirstOrDefault(x => x.Id == previousActiveTabId);

var args = new TabsEventArgs(activeTabTitle!, previousActiveTabTitle!);
var args = new TabsEventArgs(activeTab?.Name!, activeTab?.Title!, previousActiveTab?.Name!, previousActiveTab?.Title!);
await OnShown.InvokeAsync(args);
}

[JSInvokable]
public async Task bsShowTab(string activeTabId, string previousActiveTabId)
{
var activeTabTitle = tabs?.FirstOrDefault(x => x.Id == activeTabId)?.Title;
var previousActiveTabTitle = tabs?.FirstOrDefault(x => x.Id == previousActiveTabId)?.Title;
var activeTab = tabs?.FirstOrDefault(x => x.Id == activeTabId);
var previousActiveTab = tabs?.FirstOrDefault(x => x.Id == previousActiveTabId);

var args = new TabsEventArgs(activeTabTitle!, previousActiveTabTitle!);
var args = new TabsEventArgs(activeTab?.Name!, activeTab?.Title!, previousActiveTab?.Name!, previousActiveTab?.Title!);
await OnShowing.InvokeAsync(args);
}

/// <summary>
/// Gets the active tab.
/// </summary>
/// <returns>Returns the cuurent active <see cref="Tab"/>.</returns>
public Tab GetActiveTab() => activeTab;

/// <summary>
/// Initializes the most recently added tab, optionally displaying it.
/// </summary>
Expand Down
18 changes: 15 additions & 3 deletions blazorbootstrap/EventArguments/Tabs/TabsEventArgs.cs
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,11 @@ public class TabsEventArgs : EventArgs
{
#region Constructors

public TabsEventArgs(string activeTabTitle, string previousActiveTabTitle)
public TabsEventArgs(string activeTabName, string activeTabTitle, string previousActiveTabName, string previousActiveTabTitle)
{
ActiveTabName = activeTabName;
ActiveTabTitle = activeTabTitle;
PreviousActiveTabName = previousActiveTabName;
PreviousActiveTabTitle = previousActiveTabTitle;
}

Expand All @@ -15,12 +17,22 @@ public TabsEventArgs(string activeTabTitle, string previousActiveTabTitle)
#region Properties, Indexers

/// <summary>
/// Gets the active tab title.
/// Gets the active <see cref="Tab" /> name.
/// </summary>
public string ActiveTabName { get; }

/// <summary>
/// Gets the active <see cref="Tab" /> title.
/// </summary>
public string ActiveTabTitle { get; }

/// <summary>
/// Gets the previous active tab title.
/// Gets the previous active <see cref="Tab" /> name.
/// </summary>
public string PreviousActiveTabName { get; }

/// <summary>
/// Gets the previous active <see cref="Tab" /> title.
/// </summary>
public string PreviousActiveTabTitle { get; }

Expand Down
1 change: 1 addition & 0 deletions docs/docs/05-components/tabs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ Documentation and examples for using Blazor Bootstrap Tabs components.

| Name | Description | Added Version |
|:--|:--|:--|
| GetActiveTab() | Gets the active tab. | 3.0.0 |
| InitializeRecentTab(bool showTab) | Initializes the most recently added tab, optionally displaying it. | 1.11.0 |
| RemoveTabByIndex(int tabIndex) | Removes the tab by index. | 2.2.0 |
| RemoveTabByName(string tabName) | Removes the tab by name. | 2.2.0 |
Expand Down

0 comments on commit cbf1b52

Please sign in to comment.