时间戳

首页 > 解决方案 > 在 Blazor 中显示或隐藏侧边菜单

blazor - 在 Blazor 中显示或隐藏侧边菜单

问题描述

我是 blazor 的初学者。

请告诉我如何使用按钮显示或隐藏 Blazor 标准模板的侧边菜单。

非常感谢 ！

标签： blazor

解决方案

最好是使用您自己的服务器，创建一个名为ViewOptionService.cs的新类。这将包含逻辑并作为单例服务工作。_navBarVisible 将保持导航栏是否隐藏的状态，而 Toggle 将更改状态， NavBarClass 将用于隐藏导航栏的 div：

public class ViewOptionService
{
    private bool _navBarVisible = true;

    public Action OnChanged { get; set; }
    
    //Change state by click on the button
    public void Toggle()
    {
        _navBarVisible = !_navBarVisible;//Change
        if (OnChanged != null) OnChanged();//Callback for reload
    }

    //get additional css class for nav bar div
    public string NavBarClass
    {
        get
        {
            if (_navBarVisible) return String.Empty;//No additional css class for show nav bar
            return "d-none";//d-none class will hide the div
        }
    }
}

我们必须将 ViewOptionService 注册为服务，因此修改Program.cs中的Main：

public static async Task Main(string[] args)
{
    //..
    //Add next line to register
    builder.Services.AddSingleton<ViewOptionService>();

    await builder.Build().RunAsync();
}

现在我们可以将它作为服务注入并在MainLayout.razor中使用它来向 div 添加一个 css 类：

@inherits LayoutComponentBase
@inject ViewOptionService ViewOption

<div class="sidebar @ViewOption.NavBarClass">
    <NavMenu />
</div>

我们还可以将其注入Index.razor（或其他地方）以添加按钮：

@page "/"
@inject ViewOptionService ViewOption

<button @onclick="ViewOption.Toggle">Hide Menu</button>

缺少最后一步，如果值发生变化，我们需要重新加载 MainLayout.razor，因此我们需要向 MainLayout 添加代码部分：

@code {

    protected override async Task OnInitializedAsync()
    {
        ViewOption.OnChanged = () => { 
            StateHasChanged();//Refresh
        };
    }
}

=== 编辑 ===

我在https://github.com/DanielHWe/Hide-Blazor-NavBar-Sample下发布了完整代码

推荐阅读