Blazor 中的隐藏/显示菜单名称

Question

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

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

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

Answer 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

Answer 2

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

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

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