Как сделать подменю в BlazorStrap? - PullRequest
Новая
       35

Как сделать подменю в BlazorStrap?

0 голосов
/ 28 апреля 2020

Я учусь создавать веб-приложение на стороне сервера Blazor, используя компонент BlazorStrap. Я исследовал https://blazorstrap.io/navbars, чтобы выяснить, как сделать подменю 2 или 3 уровня без какого-либо успеха. Можно ли использовать BlazorStrap для создания многоуровневой навигационной панели? Если да, то как? Любая помощь очень ценится. Спасибо.

Вот что у меня есть для TopMenu.razor: 

<BSNavbar IsExpand="true" IsDark="false" Color="Color.Light">
<BSNavbarToggler @onclick="onclick" />
<BSCollapse isOpen="@IsOpen" IsNavbar="true" IsOpenChanged="OpenChanged">
    <BSNav IsList="true" Class="mr-auto" IsNavbar="true" Alignment="Alignment.Left">
        <BSNavItem>
            <BSNavLink IsActive="true" Href="javascript:void(0);">Home</BSNavLink>
        </BSNavItem>
        <BSNavItem IsDropdown="true">
            <BSDropdownToggle Color="Color.Light">Transactions</BSDropdownToggle>
            <BSDropdownMenu>
                <BSDropdownItem Href="javascript:void(0);">Direct Transfer</BSDropdownItem>
                <BSNavItem IsDropdown="true">
                    <BSDropdownToggle Color="Color.Light">FIFO / LIFO</BSDropdownToggle>
                    <BSDropdownMenu>
                        <BSDropdownItem Href="javascript:void(0);">FIFO / LIFO (One to Many)</BSDropdownItem>
                        <BSDropdownItem Href="javascript:void(0);">FIFO / LIFO (Many to One)</BSDropdownItem>
                    </BSDropdownMenu>
                </BSNavItem>
            </BSDropdownMenu>
        </BSNavItem>
    </BSNav>
</BSCollapse>


    @code
{
    bool IsOpen { get; set; } = true;
    void onclick(MouseEventArgs e)
    {
        IsOpen = !IsOpen;
        StateHasChanged();
        Console.WriteLine("Navbar Class->" + IsOpen.ToString());
    }
    void OpenChanged(bool e)
    {
        IsOpen = e;
        InvokeAsync(StateHasChanged);
        Console.WriteLine("OpenChanged->" + IsOpen.ToString());
    }

    bool IsOpen2 { get; set; } = true;
    void onclick2(MouseEventArgs e)
    {
        IsOpen2 = !IsOpen2;
        StateHasChanged();
    }
}

enter image description here

1 Ответ

0 голосов
/ 05 мая 2020

Вам не хватает привязок на вложенном раскрывающемся меню, которые переключают состояние раскрывающегося списка. Это отметка для вашей навигационной панели с правильными привязками. 

<BSNavbar IsExpand="true" IsDark="false" Color="Color.Light">
    <BSNavbarToggler @onclick="onclick" />
    <BSCollapse isOpen="@IsOpen" IsNavbar="true" IsOpenChanged="OpenChanged">
        <BSNav IsList="true" Class="mr-auto" IsNavbar="true" Alignment="Alignment.Left">
            <BSNavItem>
                <BSNavLink IsActive="true" Href="javascript:void(0);">Home</BSNavLink>
            </BSNavItem>
            <BSNavItem IsDropdown="true">
                <BSDropdownToggle Color="Color.Light">Transactions</BSDropdownToggle>
                <BSDropdownMenu>
                    <BSDropdownItem Href="javascript:void(0);">Direct Transfer</BSDropdownItem>
                    <BSNavItem IsDropdown="true">
                        <BSDropdownToggle Color="Color.Light" @onclick="onclick2">FIFO / LIFO</BSDropdownToggle>
                        <BSDropdownMenu @bind-IsOpen="@IsOpen2">
                            <BSDropdownItem Href="javascript:void(0);">FIFO / LIFO (One to Many)</BSDropdownItem>
                            <BSDropdownItem Href="javascript:void(0);">FIFO / LIFO (Many to One)</BSDropdownItem>
                        </BSDropdownMenu>
                    </BSNavItem>
                </BSDropdownMenu>
            </BSNavItem>
        </BSNav>
    </BSCollapse>
</BSNavbar>
...