在 Blazor 中隐藏/显示菜单名称答案

【问题标题】：HIDE /SHOW Menu Names in Blazor在 Blazor 中隐藏/显示菜单名称
【发布时间】：2023-02-16 22:11:56
【问题描述】：

我是 Blazor UI 开发的新手我一直在尝试在此菜单上工作以最初看起来像这张图片

单击菜单顶部的按钮后，它应该如下图所示

我试过的代码也用图标隐藏了菜单，请在这里帮助我。谢谢

【问题讨论】：

标签： c# user-interface blazor-webassembly

【解决方案1】：

我建议您在 Blazor 之上使用另一个库（扩展）。一个非常方便且经过验证（免费使用）的库是，例如，MudBlazor。你可以在这里找到文档：https://mudblazor.com/

您所描述的内容可以使用此库来实现，例如使用以下代码：

<MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@ToggleDrawer" />

<MudDrawer @bind-Open="@open" Variant="@DrawerVariant.Mini">
    <MudNavMenu >
        <MudNavLink Icon="@Icons.Filled.Calculate">Link1</MudNavLink>
        <MudNavLink Icon="@Icons.Filled.LocalCafe">Link2</MudNavLink>
    </MudNavMenu>
</MudDrawer>

@code {
    private bool open = true;

    private void ToggleDrawer()
    {
        open = !open;
    }
}

你可以在这里试试这个代码：https://try.mudblazor.com/snippet/QaQmYZEsxBSUEJuv

【讨论】：

这很好用，谢谢，但是我不能使用 HTML 和 bootstrap css 做到这一点，请帮助解决这个问题。

【解决方案2】：

我不知道它是否适合您，但您可以尝试制作 2 个面板，一个用于徽标，另一个用于文本。然后只需在表单加载中写入panel2.visible = false。在那之后写在显示文本按钮里面。

if (panel2.visibile == false)
{
    panel2.visible = true
}
    else if (panel2.visibile == true)
{
    panel2.visible = false
}

我不知道这是你想要的，但你只需 3 行代码就可以尝试

【讨论】：