BoldSignEasily embed eSignatures in your .NET applications. Free sandbox with native SDK available.
@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Navigations
<button class="e-btn" @onclick="@AddTab">Add Tab </button>
<EjsTab @ref="TabObj">
<TabItems>
<TabItem>
<ChildContent>
<TabHeader Text="Twitter"></TabHeader>
</ChildContent>
<ContentTemplate>
Twitter Content
</ContentTemplate>
</TabItem>
</TabItems>
</EjsTab>
@code {
private EjsTab TabObj;
string HTMLString = " The content contains <strong> HTML text <strong> and Dynamically added.";
public void AddTab()
{
TabItem[] t = new TabItem[1];
t[0] = new TabItem()
{
Header = new TabHeader() { Text = "Header" },
Content = HTMLString
};
TabObj.AddTab(t, 0);
}
@*public RenderFragment Content = builder =>
{
builder.AddContent(1,@<FetchData />);
};*@
} |
@using Syncfusion.EJ2.Blazor.Navigations
<button @onclick="AddTab">Add Tab</button>
<EjsTab @ref="_tab" CssClass="e-fill" Items="Items" OverflowMode="OverflowMode.Scrollable" ShowCloseButton="true">
</EjsTab>
@code {
private EjsTab _tab;
List<TabItem> Items = new List<TabItem>(){
new TabItem() { Header = new TabHeader() { Text = "One" }, Content = "Test 1" },
new TabItem() { Header = new TabHeader() { Text = "Two" }, Content = "Test 2" }
};
public void AddTab()
{
List<TabItem> tabs = new List<TabItem>() {
new TabItem() { Header = new TabHeader() { Text = "Three" }, Content = "Test 3" },
new TabItem() { Header = new TabHeader() { Text = "FetchData" }, ContentTemplate = @<FetchData></FetchData> }
};
_tab.AddTab(tabs, 0);
}
} |
<button @onclick="AddTab">ADD TAB</button>
<SfTab @ref="_mainTab" Items="@tabitems" @bind-SelectedItem="SelectedTab">
</SfTab>
@code{
SfTab _mainTab;
double SelectedTab { get; set; } = 0;
public List<TabItem> tabitems = new List<TabItem>()
{
new TabItem() { Header = new TabHeader() { Text = "Sample" }, Content = "Sample Side Code content" },
new TabItem() { Header = new TabHeader() { Text = "Source" }, Content = "Source Side Code content" },
new TabItem() { Header = new TabHeader() { Text = "Style" }, Content = "Style Side Code content" }
};
public void AddTab()
{
List<TabItem> tabs = new List<TabItem>() {
new TabItem() { Header = new TabHeader() { Text = "Three" }, Content = "Test 3" }
};
_mainTab.AddTab(tabs, _mainTab.Items.Count);
SelectedTab = _mainTab.Items.Count - 1; // To select the last Tabitem
StateHasChanged();
}
} |
Note: Refer the below UG link for that
|
Notes: Refer the below release notes dynamic Tab feature
|