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

汤姆猫

我是 blazor 的初学者。

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

非常感谢 !

丹尼尔·W。

最好是使用您自己的服务器,创建一个名为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中

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下发布了完整代码

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章