javascript - 如何在 blazor webassembly 中使用折叠边栏
问题描述
我想在 blzor webassembly 中制作一个折叠侧边栏。我在 w3schools.com 中找到了一个折叠侧边栏示例(在此处输入链接描述),但我不知道如何在 blazor 中执行它。
是否可以像 blazor webassembly 中的 w3schools 示例一样制作折叠侧边栏。如果有人提供帮助,我将不胜感激。
解决方案
实际上很简单,它只是改变了两个宽度:
你仍然需要css。
@inherits LayoutComponentBase
<div style="@sidebarWidth" class="sidebar">
<a class="closebtn" @onclick="CloseNav">×</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">☰ 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;
}
推荐阅读
- angular - 如何处理(不修复!) Ionic Framework 中的 CORS 异常?
- gitlab - 在 Gitlab Prometheus 集成中添加自定义指标
- javascript - 在将 react-router 5 与 redux 7 一起使用时,react-router在转到新路由后不会重置状态
- visual-studio - Clang tidy 不使用 Visual Studio
- amazon-rds - 无法将 RDS 连接到 Google 数据洞察
- asp.net-core-mvc - 我可以注册用户,但无法使用相同的凭据再次登录
- angular - 将值传递给 ngb 模态角度
- html - 为什么 Jquery 不给出
单击锚点时折叠的类? - node.js - 使用 express 从网站获取 html 返回无效的标头值 char
- django - 在 django 中重启 celery 和 celery beat schedule 关系