Dynamically add a Blazor component in a New Tab

[Brian King]

I would like to be able to add a new tab dynamically and have the content of that new tab be an existing Blazor component.  I am developing with Blazor.  How would I go about doing that?  I would like to add the new tab using a button press and not use the OnAddNewTabClick callback.

[ivanpeevski]

Hi Brian,

 

Blazor is not designed for adding new components dynamically, so any solution will be limited in some way.

One solution, if you are adding only a fixed amount of tabs, is to add the tabs from the beginning, but make them invincible with CSS. For example:

<style>
div[aria-label=”Tab 3″]{
display: @tabDisplayStyle !important;
}
</style>

<Tabs @ref=”tabs”>
<TabItem Label=”Tab 1″>
<ProgressBar Value=”80″></ProgressBar>
</TabItem>
<TabItem Label=”Tab 2″><ProgressBar Value=”50″></ProgressBar></TabItem>
<TabItem Label=”Tab 3″ ><ProgressBar Value=”20″></ProgressBar></TabItem>
</Tabs>

<Button OnClick=”AddTab”>Add Tab</Button>

@code{
Tabs tabs;

string tabDisplayStyle = “none”;
private void AddTab()
{
tabDisplayStyle = “inline-block”;
}
}

 

If you need to add a variable number of tabs, the alternative is to use JSInterop and programatically move the elements with JavaScript after the tab is created.

 

Best Regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts