Dynamically adding tabs

[gpeipman]

Hi!

How can I add new tabs dynamically to tabs component? I would like to do it in code.

[gvreddy04]

@gpeipman Thank you for trying BlazorBootstrap. Currently, dynamic tabs are not supported. Please create an issue on GitHub to report this. We will add this as an enhancement. To help us prioritize the feature, please provide more details about the scenarios where you would use dynamic tabs.

We appreciate your feedback!

[nolisj]

@gpeipman , you can make it work (dynamic tabs) using a mix of Javascript and C# code. Here's an example that worked for me (using Server option, not Web Assembly):

//App.razor:

`<script>
window.addNewTab = (mainTabId, newTabId) => {
//mainTabId = the ID of the parent tab container (aka Tabs component); eg: <Tabs id="myMainTabContainer" ....
//newTabId = the ID of the new child tab item

//Note: the tab is actually creating a button
var button = document.createElement("button");
button.id = newTabId;
button.type = "button";
button.role = "tab";
button.ariaSelected = "false";
button.tabIndex = "-1";
button.classList.add("nav-link");
//tab display text
button.innerText = "My Dynamic Tab";

button.addEventListener("click", function () {
    //assign the "show"" function to the click event
    window.blazorBootstrap.tabs.show(newTabId);
}, false);

//assign the name of the partner content div
var att = document.createAttribute("data-bs-target");
// Set a value of the attribute
att.value = "#nav-" + newTabId;
button.setAttributeNode(att);

//append to the children of the main tab
document.getElementById(mainTabId).appendChild(button);

}

window.addNewTabPane = (tabContentClass, sourceTabId) => {
//==================================
//This is for the content of the tab
//==================================
//Parameters:
//tabContentClass = always "tab-content" based on the generated div element!!!
//sourceTabId = id of the tab that triggers this tab pane (aka content)

var tabPaneDiv = document.createElement("div");
tabPaneDiv.id = "nav-" + sourceTabId;
tabPaneDiv.role = "tabpanel";
tabPaneDiv.classList.add("tab-pane");
//optional
tabPaneDiv.innerText = "Sample content";

var att = document.createAttribute("aria-labelledby");
// Set a value of the attribute;
// it should match the ID of the triggering tab 
att.value = sourceTabId;
tabPaneDiv.setAttributeNode(att);

//we used the getElementsByClassName because it's not an ID that we pass;
var nodes = document.getElementsByClassName(tabContentClass);
//this is a collection
var number = nodes.length;
if (number > 0) {
    //we used the first one (which is always the case, meaning always one!)
    nodes[0].appendChild(tabPaneDiv);
}

}
</script>`

//In your Program.cs:
// this is the ID generator of BlazorBootstrap
builder.Services.AddScoped<IIdGenerator, IdGenerator>();

//In your Blazor page:

//sample Tabs component with Id
<Tabs id="myMainTabContainer" ....

//Code:

[Inject] protected IIdGenerator IdGenerator { get; set; }

private async Task SomeFunctionToCallTheTabCreation()
{
await AddNewTab("myMainTabContainer");
}

private async Task AddNewTab(string mainTabId)
{
string tabId = IdGenerator.GetNextId();
await CallJs("addNewTab", mainTabId, tabId);

await CallJs("addNewTabPane", "tab-content", tabId);

}

//wrapper function to JS Interop
private async Task CallJs(string identifier, params object?[]? myparams)
{
await JS.InvokeVoidAsync(identifier, myparams);
}

[nolisj]

(please ignore the formatting of Github; you should be able to see which are the actual code based on my comments.)

[gvreddy04]

@gpeipman @nolisj We are adding an example how to create dynamic tabs in the next release.

[gpeipman]

I managed to get adding work. Now I have new question - deleting a tab that user wants to close.

I'm trying to build UI where user can select projects from list and for every project there is task list shown in tab. Users must also be able to close tabs they don't currently need.

[gvreddy04]

@gpeipman Please create a separate issue for tab delete. It will be added as an enhancement.

[gvreddy04]

@gpeipman @nolisj Dynamic tabs support added and merged to master.

Demo code: https://github.com/vikramlearning/blazorbootstrap/blob/master/BlazorBootstrap.Demo.RCL/Pages/Tabs/Tabs_Demo_13_Dynamic_Tabs.razor

PR: #538

[nolisj]

@gvreddy04 , I'll definitely check this out. Thanks a lot!