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 行代碼