We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
|
@using Syncfusion.Blazor.Navigations
<div class="menu-control">
<SfMenu 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;">
@{
<svg class="bi bi-kanban-fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M2.5 0a2 2 0 00-2 2v12a2 2 0 002 2h11a2 2 0 002-2V2a2 2 0 00-2-2h-11zm5 2a1 1 0 00-1 1v3a1 1 0 001 1h1a1 1 0 001-1V3a1 1 0 00-1-1h-1zm-5 1a1 1 0 011-1h1a1 1 0 011 1v7a1 1 0 01-1 1h-1a1 1 0 01-1-1V3zm9-1a1 1 0 00-1 1v10a1 1 0 001 1h1a1 1 0 001-1V3a1 1 0 00-1-1h-1z" clip-rule="evenodd" />
</svg>
<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>
</SfMenu>
</div>
@code{
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; }
}
}
<style>
.bi.bi-kanban-fill {
margin: 11px 11px 3px 0px;
}
.menu-control {
margin-top: 45px;
text-align: center;
}
/* Common ul & li styles */
.mobile .e-menu-wrapper ul.e-ul,
.e-menu-wrapper ul.e-ul {
padding: 0;
}
.mobile .e-menu-wrapper ul.e-ul .e-menu-item,
.e-menu-wrapper ul.e-ul .e-menu-item {
display: flex;
padding: 0 10px;
outline-color: transparent;
}
/** Avatar customization */
.e-menu-wrapper ul .e-menu-item .e-avatar {
background-color: inherit;
font-size: 8px;
margin-right: 8px;
align-self: center;
width: auto;
overflow: visible;
}
.mobile .e-menu-wrapper ul .e-menu-item .e-avatar {
font-size: 10px;
}
/** Badge customization */
.e-menu-wrapper ul .e-menu-item .e-badge {
margin-left: 10px;
align-self: center;
overflow: visible;
}
/** Card customization */
.e-menu-wrapper ul.e-ul .e-menu-item .e-card {
width: 290px;
font-size: inherit;
background-color: inherit;
border-color: transparent;
}
.mobile .e-menu-wrapper ul.e-ul .e-menu-item .e-card {
width: 320px;
}
.e-menu-wrapper ul.e-ul .e-menu-item .e-card .e-card-content {
white-space: normal;
color: inherit;
padding-top: 0;
text-align: justify;
font-size: inherit;
}
.e-menu-wrapper ul.e-ul .e-menu-item#about {
height: auto;
padding: 0;
}
.e-menu-wrapper ul.e-ul .e-menu-item#about.e-focused {
background-color: transparent;
outline-color: transparent;
pointer-events: none;
}
.e-menu-wrapper .e-ul .e-menu-item {
height: 36px;
line-height: 36px;
}
</style> |
Thank you very much for your help. After executing this code, it seems to be exactly what i was looking for.
--------------------
Just one general Question regarding this topic: In your documentation for Blazor, many Classes have the option to pass a RenderFragment (called ChildContent), like that:
public RenderFragment ChildContent {get; set;}
Is the idea here to pass any Razor Component code here, and then it gets rendered in the current Component? It seems like i can't just pass the HTML svg code here as a RenderFragment that i posted above, and then expect the icon to be rendered there. So what is the general intention of the ChildContent property?
