I'm trying to use the EjsTab control inside my Blazor project but it's not working neither in that project nor in the online sample demonstrated in the link below:
I've tried this both on Google Chrome 74 and Microsoft Edge.
@page "/"
@using Syncfusion.EJ2.RazorComponents.Navigations
@using BlazorPreview.Shared
<h1>Hello, world!</h1>
<SurveyPrompt Title="How is Blazor working for you?" />
<style>
.e-content .e-item {
font-size: 12px;
padding: 10px;
text-align: justify;
}
#defaultTab .e-tab-icon {
font-family: 'Socialicons' !important;
}
#defaultTab .e-icons.e-tab-icon {
position: relative;
top: 1px;
}
.e-twitter:before {
content: '\a701';
}
.e-facebook:before {
content: '\a705';
}
.e-whatsapp:before {
content: '\a700';
}
</style>
<EjsTab ID="defaultTab" ref="d">
<TabTabItems>
<TabTabItem Header="@header1" Content="@content1"></TabTabItem>
<TabTabItem Header="@header2" Content="@content2"></TabTabItem>
<TabTabItem Header="@header3" Content="@content3"></TabTabItem>
</TabTabItems>
</EjsTab>
@functions{
EjsTab d;
public object header1 = new { text = "Twitter", iconCss = "e-twitter" };
public object header2 = new { text = "Facebook", iconCss = "e-facebook" };
public object header3 = new { text = "Whatsapp", iconCss = "e-whatsapp" };
public string content1 = "witter is an online social networking service that enables users to send and read short 140-character";
public string content2 = "Facebook is an online social networking service headquartered in Menlo Park, California. Its website was";
public string content3 = "WhatsApp Messenger is a proprietary cross-platform instant messaging client for smartphones that operates";
private List<Object>
TabItems
{ get; set; } = new List<Object>
{
new { header = new { text = "Twitter", iconCss = "e-twitter" }, content = "Twitter is an online social networking service that enables users to send and read short 140-character " },
new { header = new { text = "Facebook", iconCss = "e-facebook" }, content = "Facebook is an online social networking service headquartered in Menlo Park, California. Its website was " } ,
new { header = new { text = "WhatsApp", iconCss = "e-whatsapp" }, content = "WhatsApp Messenger is a proprietary cross-platform instant messaging client for smartphones that operates " } ,
};
protected override async Task OnInitAsync()
{
d.DataBind();
}
}
