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

Question

我想在blzor-webassembly中制作一个折叠侧边栏。我在w3schools.com中找到了一个collapse侧边栏的示例(在此处输入链接描述(，但我不知道如何在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;
}