Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
149848 | Dec 11,2019 02:41 PM UTC | Jun 19,2020 09:10 AM UTC | Blazor | 19 |
![]() |
Tags: Menu Bar |
<div id="wrapper">
<div class="col-lg-12 col-sm-12 col-md-12">
<div class="header-section dock-menu" id="header">
<ul class="header-list">
<li id="hamburger" class="icon-menu icon list" @onclick="@Toggle"></li>
<input type="text" placeholder="Search..." class="search-icon list">
<li class="right-header list">
<div class="horizontal-menu">
<EjsMenu CssClass="dock-menu" Items="@AccountMenuItems" Orientation="@Orientation"></EjsMenu>
</div>
</li>
<li class="right-header list support">Support</li>
<li class="right-header list tour">Tour</li>
</ul>
</div>
<EjsSidebar HtmlAttributes="@htmlAttribute" Target=".main-content" Width="220px" DockSize="50px" EnableDock="true" @ref="sidebar">
<ChildContent>
<div class="main-menu">
<p class="main-menu-header">MAIN</p>
<div>
<EjsMenu ModelType="@MenuTemplate" Fields="@MenuFields" Items="@MainMenuItems" Orientation="Orientation.Vertical">
<MenuTemplates>
<Template>
@{
var MenuItems = (context as MenuTemplateModel);
if (MenuItems.Icon != null)
{
<span class="e-menu-icon @MenuItems.Icon" title="@MenuItems.Value"></span>
}
if (!string.IsNullOrEmpty(MenuItems.Link))
{
<a rel='nofollow' href="@MenuItems.Link">@MenuItems.Value</a>
}
else
{
@MenuItems.Value
}
}
</Template>
</MenuTemplates>
</EjsMenu>
</div>
</div>
<div class="action">
<p class="main-menu-header">ACTION</p>
<button class="e-btn action-btn" id="action-button">+ Button</button>
</div>
</ChildContent>
</EjsSidebar>
<div class="main-content" id="maintext">
<div class="content">
<div> Responsive Sidebar with Menu</div>
</div>
</div>
</div>
</div>
@code {
EjsSidebar sidebar;
public Orientation Orientation = Orientation.Horizontal;
public Orientation Verorientation = Orientation.Vertical;
Dictionary<string, object> htmlAttribute = new Dictionary<string, object>()
{
{"class", "sidebar-menu" }
};
public List<MenuItem> AccountMenuItems = new List<MenuItem> {
new MenuItem {
Text = "Account",
Items = new List<MenuItem> {
new MenuItem { Text = "Profile" },
new MenuItem { Text = "Sign out" }
}
}
};
MenuTemplateModel MenuTemplate = new MenuTemplateModel();
private List<MenuTemplateModel>
MainMenuItems = new List<MenuTemplateModel>
{
new MenuTemplateModel { Icon ="icon-bookmark icon", Value = "Meni"},
new MenuTemplateModel { Icon ="icon-bookmark icon", Value = "Pokupi podateke"},
new MenuTemplateModel { Icon ="icon-user icon",Value = "Overview", Options = new List<MenuTemplateModel>{
new MenuTemplateModel { Value= "All Data" },
new MenuTemplateModel { Value= "Category2" },
new MenuTemplateModel { Value= "Category3" }
}
},
};
MenuFieldSettings MenuFields = new MenuFieldSettings()
{
Text = "Value",
Url = "Link",
IconCss = "Icon",
Children = "Options"
};
private class MenuTemplateModel
{
public List<MenuTemplateModel> Options { get; set; }
public string Value { get; set; }
public string Link { get; set; }
public string Icon { get; set; }
}
public void Toggle()
{
this.sidebar.Toggle();
}
}
|
<EjsMenu CssClass="dock-menu" ModelType="@MenuTemplate" Fields="@MenuFields" Orientation="@Verorientation" Items="@MainMenuItems">
<MenuTemplates>
<Template Context="templateContex">
@{
var MenuItems = (templateContex as MenuTemplateModel);
if (MenuItems.Icon != null)
{
<span class="e-menu-icon @MenuItems.Icon" title="@MenuItems.Value"></span>
}
if (!string.IsNullOrEmpty(MenuItems.Link))
{
<a rel='nofollow' href="@MenuItems.Link">@MenuItems.Value</a>
}
else
{
@MenuItems.Value
}
}
</Template>
</MenuTemplates>
<MenuEvents ItemSelected="MenuSelect">
</MenuEvents>
in @code i get fired event
private void MenuSelect(MenuEventArgs args){if (args.Item.Text == "Meni")this.sidebar.Toggle();}
But args.Item does not preserve Text , Or ID or anything that I could use to route my action in code behind.
Thanks in advance
<div id="wrapper">
<div class="col-lg-12 col-sm-12 col-md-12">
<div class="header-section dock-menu" id="header">
<ul class="header-list">
<li id="hamburger" class="icon-menu icon list" @onclick="@Toggle"></li>
<input type="text" placeholder="Search..." class="search-icon list">
<li class="right-header list">
<div class="horizontal-menu">
EjsMenu CssClass="dock-menu" Items="@AccountMenuItems" Orientation="@Orientation"></EjsMenu>
</div>
</li>
<li class="right-header list support">Support</li>
<li class="right-header list tour">Tour</li>
</ul>
</div>
<EjsSidebar HtmlAttributes="@htmlAttribute" Target=".main-content" Width="220px" DockSize="50px" EnableDock="true" @ref="sidebar">
<ChildContent>
<div class="main-menu">
<p class="main-menu-header">MAIN</p>
<div>
<EjsMenu ModelType="@typeof(MenuItemModel)" Items="@MainMenuItems" Orientation="Orientation.Vertical">
<MenuTemplates>
<Template>
@{
var MenuItems = (context as MenuItemModel);
if (MenuItems.IconCss != null)
{
<span class="e-menu-icon @MenuItems.IconCss" title="@MenuItems.Text"></span>
}
if (!string.IsNullOrEmpty(MenuItems.Url))
{
<a rel='nofollow' href="@MenuItems.Url">@MenuItems.Text</a>
}
else
{
@MenuItems.Text
}
}
</Template>
</MenuTemplates>
<MenuEvents ItemSelected="onItemSelected"></MenuEvents>
</EjsMenu>
</div>
</div>
<div class="action">
<p class="main-menu-header">ACTION</p>
<button class="e-btn action-btn" id="action-button">+ Button</button>
</div>
</ChildContent>
</EjsSidebar>
<div class="main-content" id="maintext">
<div class="content">
<div> Responsive Sidebar with Menu</div>
</div>
</div>
</div>
</div>
@code {
EjsSidebar sidebar;
public Orientation Orientation = Orientation.Horizontal;
public Orientation Verorientation = Orientation.Vertical;
Dictionary<string, object> htmlAttribute = new Dictionary<string, object>()
{
{"class", "sidebar-menu" }
};
public List<MenuItem> AccountMenuItems = new List<MenuItem> {
new MenuItem {
Text = "Account",
Items = new List<MenuItem> {
new MenuItem { Text = "Profile" },
new MenuItem { Text = "Sign out" }
}
}
};
MenuItemModel MenuTemplate = new MenuItemModel();
private List<MenuItem>
MainMenuItems = new List<MenuItem>
{
new MenuItem { IconCss ="icon-bookmark icon", Text = "Meni"},
new MenuItem { IconCss ="icon-bookmark icon", Text = "Pokupi podateke"},
new MenuItem { IconCss ="icon-user icon",Text = "Overview", Items = new List<MenuItem>{
new MenuItem { Text= "All Data" },
new MenuItem { Text= "Category2" },
new MenuItem { Text= "Category3" }
}
},
};
public void Toggle()
{
this.sidebar.Toggle();
}
public void onItemSelected(MenuEventArgs args)
{
string itemText = args.Item.Text;
}
}
|
<EjsMenu ModelType="@typeof(MenuItemModel)" Items="@MainMenuItems" Orientation="Orientation.Vertical" @ref="verticalMenu">
<MenuTemplates>
<Template>
@{
var MenuItems = (context as MenuItemModel);
if (MenuItems.IconCss != null)
{
<span class="e-menu-icon @MenuItems.IconCss hover">
<div class="tooltip">
@MenuItems.Text
</div>
</span>
}
if (!string.IsNullOrEmpty(MenuItems.Url))
{
<a rel='nofollow' href="@MenuItems.Url">@MenuItems.Text</a>
}
else
{
@MenuItems.Text
}
}
</Template>
</MenuTemplates>
<MenuEvents ItemSelected="onItemSelected"></MenuEvents>
</EjsMenu>
<style>
.hover {
position: relative;
}
.tooltip {
top: 30px;
background-color: crimson;
color: black;
opacity: 0;
position: absolute;
font-size:12px;
left: 12px;
}
.hover:hover .tooltip {
/* display tooltip on hover */
opacity: 1;
}
<style>
|
.sidebar-menu,
.sidebar-menu .main-menu .e-menu-wrapper,
.sidebar-menu .main-menu .e-menu-wrapper .e-menu {
overflow: visible;
} |
@@media (max-width: 600px) {
.sidebar-menu .e-menu-wrapper ul.e-menu {
min-width: 48px;
}
.sidebar-menu .e-menu-wrapper ul.e-menu .e-menu-item {
font-size: 0;
}
.sidebar-menu .e-menu-wrapper,
.sidebar-menu .e-menu-wrapper .e-menu {
overflow: visible;
}
} |
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.