Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
| 150035 | Dec 18,2019 12:18 PM UTC | Dec 23,2019 10:48 AM UTC | Blazor | 4 |
|
Tags: Menu Bar |
|
@inject Microsoft.AspNetCore.Components.NavigationManager UriHelper;
<div class="menu-control">
<EjsMenu Items="@data" Fields="@MenuFields" ModelType=@typeof(CategoryModel)>
<MenuTemplates>
<Template>
@{
var MenuItems = (context as CategoryModel);
if (@MenuItems.Category != null)
{
<div>@(@MenuItems.Category)</div>
}
else if (@MenuItems.value != null)
{
<div style="width: 100%;display: flex;justify-content: space-between;">
@{
if (@MenuItems.url != null)
{
<img class="e-avatar e-avatar-small" src="@UriHelper.ToAbsoluteUri($"images/MenuBar/{MenuItems.url}.png")" />
}
<span style="width:100%;">@MenuItems.value</span>
if (@MenuItems.count != null)
{
<span class="e-badge e-badge-success">@MenuItems.count</span>
}
}
</div>
}
else
{
<div tabindex="0" class="e-card">
<div class="e-card-header">
<div class="e-card-header-caption">
<div class="e-card-header-title">about Us</div>
</div>
</div>
<div class="e-card-content">
@MenuItems.about
</div>
<div class="e-card-actions">
<input type="button" class="e-btn e-outline" style="pointer-events: auto;" value="Read More" />
</div>
</div>
}
}
</Template>
</MenuTemplates>
</EjsMenu>
</div>
@code {
CategoryModel MenuTemplate = new CategoryModel();
private List<CategoryModel>
data = new List<CategoryModel>
{
new CategoryModel {
Category = "Products",
Options = new List<CategoryModel>
{
new CategoryModel { value= "JavaScript", url= "javascript" },
new CategoryModel { value= "Angular", url= "angular" },
new CategoryModel { value= "ASP.NET Core", url= "core" },
new CategoryModel { value= "ASP.NET MVC", url= "mvc" }
}
},
new CategoryModel{
Category = "Services",
Options = new List<CategoryModel>
{
new CategoryModel { value= "Application Development", count= "1200+" },
new CategoryModel { value= "Maintenance & Support", count= "3700+" },
new CategoryModel { value= "Quality Assurance" },
new CategoryModel { value= "Cloud Integration", count= "900+" }
}
},
new CategoryModel{
Category = "about Us",
Options = new List<CategoryModel>
{
new CategoryModel{
id = "about",
about = "We are on a mission to provide world-class best software solutions for web, mobile and desktop platforms. Around 900+ applications are desgined and delivered to our customers to make digital & strengthen their businesses."
}
}
},
new CategoryModel { Category = "Careers" },
new CategoryModel { Category = "Sign In" }
};
MenuFieldSettings MenuFields = new MenuFieldSettings()
{
Text = new string[] { "Category", "value" },
Children = new string[] { "Options" }
};
private class CategoryModel
{
public string Category { get; set; }
public List<CategoryModel>
Options
{ get; set; }
public string value { get; set; }
public string url { get; set; }
public string count { get; set; }
public string id { get; set; }
public string about { get; set; }
public string iconCss { get; set; }
}
}
|
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
This page will automatically be redirected to the sign-in page in 10 seconds.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
