如何在 blazor webassembly 中使用折叠边栏答案

【问题标题】：How to use Collapse Sidebar in blazor webassembly如何在 blazor webassembly 中使用折叠边栏
【发布时间】：2021-02-27 09:56:33
【问题描述】：

我想在 blzor webassembly 中制作一个折叠侧边栏。我在 w3schools.com (enter link description here) 中找到了折叠侧边栏的示例，但我不知道如何在 blazor 中执行它。

是否可以像 blazor webassembly 中的 w3schools 示例一样制作折叠侧边栏。如果有人提供帮助，我将不胜感激。

【问题讨论】：

blazorise.com/docs/extensions/sidebar

标签： javascript html css blazor

【解决方案1】：

其实很简单，只是改变两个宽度：

你仍然需要 css。

@inherits LayoutComponentBase

<div style="@sidebarWidth" class="sidebar">
    <a class="closebtn" @onclick="CloseNav">&times;</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
</div>

<div style="@mainMargin">
    @if (width == 0)
    {
    <button class="openbtn" @onclick="OpenNav">&#9776; Open Sidebar</button>
    } else {
    <h2>Collapsed Sidebar</h2>
    }
    <p>@Body</p>
</div>

@code {
    int width = 0;
    string sidebarWidth => $"width: {width}px;";
    string mainMargin => $"margin-left: {width}px;";
    void OpenNav() => width = 250;
    void CloseNav() => width = 0;
}

【讨论】：

谢谢你的回复，我只是想知道一件事，当我点击打开侧边栏时，主导航菜单（Blazor 的主菜单）不会向右移动，当我点击打开时是否可能侧边栏也有主导航菜单？
@Arvin 我刚刚创建了一个新的 Blazor .net 5.0 项目。我用上面的内容替换了 MainLayout.razor 内容，然后用链接中的 css 替换了 MainLayout.razor.css 内容。它按预期打开和关闭。