blazored / menu Goto Github PK

Blazored/Menu currently displays "+" and "-" for open respectivly closed submenuitem.

It shoud be possible to specify icons open and closed state instead of + / -.

@chrissainty Would you accept a PR for that?

Josef

Does this control support multiple (nested) sub-menu levels?

Hi Chris,
Thx for your work, I use some of your packages and want now to work with menu.
I my situation, it seem to be a litte more complicated.
To be able to use browse back button with pagination I decided to implement navigation through url, e.g. http//mylongindex/5 goes to page 5. This works fine and even for opening detail views and so on.
However with submenus it seems tricky to keep them open when a new page is displayed, because obviously the initial state is closed and thus submenu is closed.
Question: How to keep the submenu open across pages?

Hi Chris,

Does this component work with server side blazor and if so can you update your sample.

Love your work.

Because you have the onclick event for both the span and the icon it causes a double-click essentially. I would just leave the one on the span

For Reference

@inherits BlazoredSubMenuBase

<li class="blazored-sub-menu-header @(IsOpen ? "open" : string.Empty)">
    <span onclick="@ToggleSubMenu"><i onclick="@ToggleSubMenu">@Icon</i> @Header</span>
    <ul class="blazored-sub-menu">
        @ChildContent
    </ul>
</li>

I've tried so hard to insert an icon in front of the submenu header, but the icon never stands in that position. I tried this code:

<BlazoredSubMenu Header="Sub Menu">
      <HeaderTemplate>
          <i class="oi oi-microphone" aria-hidden="true" /> Sub Menu
      </HeaderTemplate>
      <MenuTemplate>
        .
        .
        .      
      </MenuTemplate>
</BlazoredSubMenu>

The css is:

    .blazored-sub-menu-header span {
        display: inline;
        position: relative;
        text-align: start;
    }

The output was "Sub Menu" with the icon at the end of the line.
So, my question is: how to move the icon to the start of the line?
Thanks!!

Hi Chris,
I have created the start Blazor app, installed Blazoerd.Menu Nuget and want to replace the VS generated menu with Blazored.Menu.
What is wrong? How to change the font color?
I have added the

I have attached the screenshot

There is the NavMenu.razor, there is old menu left too to compare.

NavMenu.razor.txt

I am using your Menu component.

Just a few features that I think would provide value to others.

1. BlazoredSubMenu - for the HeaderTemplate provide a bool option to always have submenu remain "open".

• I was able todo this with CSS, but you end of with two "open open" if you actually click on submenu hyperlink.

2. BlazoredSubMenu - for the HeaderTemplate provide a bool option to show/hide the ("+" / "-") especially if submenu is to remain open.

• Had to do this to hide it.

        .custom-submenu-css > span > i {
            visibility:hidden;
        }

3. BlazoredSubMenu - for the HeaderTemplate - provide an option for submenu link to just be text and not clickable.

This may be out of the scope of this component, but is there a plan to integrate layout-sensitivity? If it's not already in the works I would be happy to contribute.

SubMenu should have a child component for the HeaderText so that we can specify some html stuff on the header. Like i wanted to add a FontAwesome icon to the header text

"<i class='fas fa-home fa-fw fa-lg' aria-hidden='true'></i> Components

How to use images in menu like menu in the VS2019 Blazor default app?

i.e. how to add images in this sample?

<BlazoredMenu MenuBuilder="@MenuBuilder" />
@functions {
    MenuBuilder MenuBuilder = new MenuBuilder();

    protected override void OnInit()
    {
        MenuBuilder.AddItem(1, "Home", "/")
                   .AddSubMenu(2, "Sub Menu", new MenuBuilder().AddItem(1, "Counter", "counter")
                   .AddItem(3, "FetchData", "fetchdata");
    }
}

Describe the bug
I'm getting the following while trying to use a submenu.

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: IconClassToClose or IconClassToOpen not specified
System.ArgumentException: IconClassToClose or IconClassToOpen not specified
   at Blazored.Menu.BlazoredSubMenuBase.OnParametersSet()
   at Microsoft.AspNetCore.Components.ComponentBase.CallOnParametersSetAsync()
   at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()

I just followed the readme to import the library in a .net7 app using webassembly.

Hi Chris!
Your Menu component is realy great! And teach me a lot. Thank you very much!
My English is not good enough to Describe the bug
So ...
(1) BlazoredSubMenuBase.cs
The icon changing doesn't work when i create a new Razor page and click the item(but the KeyDownHandler works well...),

//2022.3.25 修改
 //protected override void OnParametersSet()
protected override void OnInitialized()

(2) BlazoredSubMenu.razor
If the header is too long, the text will cover the icon.

@*<span role="button" tabindex="0" @onclick="ToggleSubMenu" @onkeydown="KeyDownHandler">@HeaderTemplate <i class="@IconCss">@Icon</i></span>*@
<div class="row p-0">
       <div class="row p-0 m-0">
           <div class="col-10 p-0 m-0">
               <span role="button" tabindex="0" @onclick="ToggleSubMenu" @onkeydown="KeyDownHandler">@HeaderTemplate</span>
           </div>
           <div class="col-1 p-0 m-0">
               <i class="@IconCss">@Icon</i>
           </div>
       </div>

I have some custom CSS i would like to apply but the Components to have parameters for custom css classes

When i install this nuget the 2 files BlazoredMenuItem.razor and BlazoredSubMenu.razor get droppped to the root. Not a big issue but i had to change the submenu to use the Full Namespace as it was causing an error

@inherits Blazored.Menu.BlazoredSubMenuBase

if you try to add a more complex menus not just for a joke but for real business environment (f.i. : with two or more menus levels) it doesn't work correctly. please fix it or delete this stuff here...tks

It might be worth renaming styles.css so when they fix the static files issue it doesnt have conflicts. and or place in a Blazore.Menu folder

I've tried this also under the 3.1.0 Preview 2 there is a still a problem:

• the first submenu seems to be not rendering correctly. The nested content does not render within li submenu node
• the second submenu renders fine.

TBI