如何在 Blazor WebAssembly 中使用折叠侧边栏

Question

我想在 blzor web assembly 中制作一个折叠侧边栏。我在 w3schools.com 中找到了折叠侧边栏的示例（在此处输入链接描述），但我不知道如何在 blazor 中执行它。

是否可以在 Blazor WebAssembly 中制作像 w3schools 示例那样的折叠侧边栏。如果有人帮忙，我将不胜感激。

Answer 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;
}

Answer 2

您可以尝试 Syncfusion Blazor 侧边栏组件。

• 一个简单且高度可定制的侧边栏，带有对接选项。
• 可以通过推动、滑动或叠加来构建渐进式布局 侧边栏内容。
• 响应式设计和触摸友好手势，轻松实现 互动。

欲了解更多详细信息，请参阅以下资源：

演示：https://blazor.syncfusion.com/demos/sidebar/default-functionities

文档：https://blazor.syncfusion.com/documentation/sidebar/getting-started

Syncfusion 向个人开发者和小型企业提供免费社区许可证。

注：我为 Syncfusion 工作。